{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "share-access-3",
  "title": "Request Access",
  "description": "Request Access for Share Access.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "button",
    "card",
    "empty",
    "select"
  ],
  "files": [
    {
      "path": "registry/intents/collaboration/share-access/share-access-3.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport { Check, Inbox, X } from 'lucide-react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n  Empty,\n  EmptyDescription,\n  EmptyMedia,\n  EmptyTitle,\n} from '@/components/ui/empty'\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select'\n\ntype Request = {\n  id: string\n  name: string\n  email: string\n  avatar: string\n  note: string\n}\n\nconst INITIAL: Request[] = [\n  {\n    id: 'katherine',\n    name: 'Katherine Johnson',\n    email: 'katherine@acme.com',\n    avatar:\n      'https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=128&h=128&fit=crop&crop=faces',\n    note: 'Need edit access to update the launch numbers.',\n  },\n  {\n    id: 'linus',\n    name: 'Linus Carlsson',\n    email: 'linus@partner.io',\n    avatar:\n      'https://images.unsplash.com/photo-1463453091185-61582044d556?w=128&h=128&fit=crop&crop=faces',\n    note: 'External partner, view only is fine.',\n  },\n]\n\nexport function ShareAccess3() {\n  const [requests, setRequests] = useState<Request[]>(INITIAL)\n  const [grantRole, setGrantRole] = useState<Record<string, string>>({})\n\n  const resolve = (id: string) =>\n    setRequests((prev) => prev.filter((r) => r.id !== id))\n\n  return (\n    <Card>\n      <CardHeader>\n        <div className=\"flex items-center justify-between\">\n          <CardTitle>Access requests</CardTitle>\n          {requests.length > 0 && (\n            <Badge variant=\"secondary\">{requests.length} pending</Badge>\n          )}\n        </div>\n      </CardHeader>\n      <CardContent className=\"flex flex-col gap-4\">\n        {requests.length === 0 ? (\n          <Empty className=\"py-8\">\n            <EmptyMedia variant=\"icon\">\n              <Inbox className=\"size-5\" />\n            </EmptyMedia>\n            <EmptyTitle>All caught up</EmptyTitle>\n            <EmptyDescription>No pending access requests.</EmptyDescription>\n          </Empty>\n        ) : (\n          requests.map((req) => (\n            <div\n              key={req.id}\n              className=\"flex flex-col gap-3 rounded-lg border p-3\"\n            >\n              <div className=\"flex items-center gap-3\">\n                <Avatar className=\"size-8\">\n                  <AvatarImage src={req.avatar} alt={req.name} />\n                  <AvatarFallback className=\"bg-muted text-xs\">\n                    {req.name\n                      .split(' ')\n                      .map((n) => n[0])\n                      .join('')}\n                  </AvatarFallback>\n                </Avatar>\n                <div className=\"flex min-w-0 flex-1 flex-col\">\n                  <span className=\"truncate text-sm font-medium\">\n                    {req.name}\n                  </span>\n                  <span className=\"text-muted-foreground truncate text-xs\">\n                    {req.email}\n                  </span>\n                </div>\n              </div>\n              <p className=\"text-muted-foreground text-xs\">{req.note}</p>\n              <div className=\"flex flex-wrap items-center gap-2\">\n                <Select\n                  value={grantRole[req.id] ?? 'viewer'}\n                  onValueChange={(v) =>\n                    setGrantRole((prev) => ({ ...prev, [req.id]: v ?? '' }))\n                  }\n                >\n                  <SelectTrigger size=\"sm\" className=\"w-28\">\n                    <SelectValue />\n                  </SelectTrigger>\n                  <SelectContent>\n                    <SelectGroup>\n                      <SelectItem value=\"viewer\">Viewer</SelectItem>\n                      <SelectItem value=\"editor\">Editor</SelectItem>\n                    </SelectGroup>\n                  </SelectContent>\n                </Select>\n                <div className=\"flex min-w-[8rem] flex-1 justify-end gap-2\">\n                  <Button\n                    variant=\"ghost\"\n                    size=\"sm\"\n                    onClick={() => resolve(req.id)}\n                  >\n                    <X className=\"size-4\" />\n                    Deny\n                  </Button>\n                  <Button size=\"sm\" onClick={() => resolve(req.id)}>\n                    <Check className=\"size-4\" />\n                    Grant\n                  </Button>\n                </div>\n              </div>\n            </div>\n          ))\n        )}\n      </CardContent>\n    </Card>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/intent/share-access/share-access-3.tsx"
    }
  ],
  "type": "registry:block"
}