{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "approval-card",
  "type": "registry:ui",
  "title": "Approval card",
  "description": "React request card for approval workflows showing the requester avatar, title and summary, with Reject and Approve buttons wired to your callbacks.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/avatar.json",
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/approval-card.tsx",
      "type": "registry:ui",
      "target": "components/ui/approval-card.tsx",
      "content": "\"use client\"\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\"\n\ntype ApprovalCardProps = {\n  title?: string\n  requester?: string\n  summary?: string\n  onApprove?: () => void\n  onReject?: () => void\n  className?: string\n}\n\n/** A request card with the requester, a summary and approve or reject actions. */\nfunction ApprovalCard({\n  title = \"Refund $1,240 on INV-2041\",\n  requester = \"Theo Okafor\",\n  summary,\n  onApprove,\n  onReject,\n  className,\n}: ApprovalCardProps) {\n  return (\n    <div\n      data-slot=\"approval-card\"\n      className={cn(\"w-full max-w-md rounded-xl border border-border bg-surface p-4\", className)}\n    >\n      <div className=\"flex items-start gap-3\">\n        <Avatar className=\"size-9\">\n          <AvatarFallback>{requester.slice(0, 2).toUpperCase()}</AvatarFallback>\n        </Avatar>\n        <div className=\"min-w-0 flex-1\">\n          <h3 className=\"text-sm font-medium text-fg\">{title}</h3>\n          <p className=\"text-xs text-fg-muted\">Requested by {requester}</p>\n          {summary ? <p className=\"mt-2 text-sm text-fg-muted\">{summary}</p> : null}\n        </div>\n      </div>\n      <div className=\"mt-4 flex justify-end gap-2\">\n        <Button type=\"button\" variant=\"outline\" size=\"sm\" onClick={onReject}>Reject</Button>\n        <Button type=\"button\" size=\"sm\" onClick={onApprove}>Approve</Button>\n      </div>\n    </div>\n  )\n}\nexport { ApprovalCard }\nexport type { ApprovalCardProps }\n"
    }
  ]
}