Approval Card

1"use client";
2 
3import * as React from "react";
4import { cn, Separator } from "./_adapter";
5import type { ApprovalCardProps, ApprovalDecision } from "./schema";
6import { ActionButtons } from "../shared/action-buttons";
7import { type Action } from "../shared/schema";
8 
9import { icons, Check, X } from "lucide-react";
10 
11type LucideIcon = React.ComponentType<{ className?: string }>;
12 
13function getLucideIcon(name: string): LucideIcon | null {
14  const pascalName = name
15    .split("-")
16    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
17    .join("");
18 
19  const Icon = icons[pascalName as keyof typeof icons];
20  return Icon ?? null;
21}
22 
23interface ApprovalCardReceiptProps {
24  id: string;
25  title: string;
26  choice: ApprovalDecision;
27  actionLabel?: string;
28  className?: string;
29}
30 
31function ApprovalCardReceipt({
32  id,
33  title,
34  choice,
35  actionLabel,
36  className,
37}: ApprovalCardReceiptProps) {
38  const isApproved = choice === "approved";
39  const displayLabel = actionLabel ?? (isApproved ? "Approved" : "Denied");
40 
41  return (
42    <div
43      className={cn(
44        "flex w-full min-w-64 max-w-md flex-col",
45        "text-foreground",
46        "motion-safe:animate-in motion-safe:fade-in motion-safe:blur-in-sm motion-safe:zoom-in-95 motion-safe:duration-300 motion-safe:ease-[cubic-bezier(0.16,1,0.3,1)] motion-safe:fill-mode-both",
47        className,
48      )}
49      data-slot="approval-card"
50      data-tool-ui-id={id}
51      data-receipt="true"
52      role="status"
53      aria-label={displayLabel}
54    >
55      <div
56        className={cn(
57          "bg-card/60 flex w-full items-center gap-3 rounded-2xl border px-4 py-3 shadow-xs",
58        )}
59      >
60        <span
61          className={cn(
62            "flex size-8 shrink-0 items-center justify-center rounded-full bg-muted",
63            isApproved ? "text-primary" : "text-muted-foreground",
64          )}
65        >
66          {isApproved ? <Check className="size-4" /> : <X className="size-4" />}
67        </span>
68        <div className="flex flex-col">
69          <span className="text-sm font-medium">{displayLabel}</span>
70          <span className="text-muted-foreground text-sm">{title}</span>
71        </div>
72      </div>
73    </div>
74  );
75}
76 
77export function ApprovalCard({
78  id,
79  title,
80  description,
81  icon,
82  metadata,
83  variant,
84  confirmLabel,
85  cancelLabel,
86  className,
87  choice,
88  onConfirm,
89  onCancel,
90}: ApprovalCardProps) {
91  const resolvedVariant = variant ?? "default";
92// … truncated