{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "user-profile-page",
  "title": "User Profile Page",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-react/blocks/user-profile-page/UserProfilePage.tsx",
      "content": "'use client'\n\nimport type { ComponentType } from 'react'\nimport {\n  CalendarDays,\n  FilePlus2,\n  GitCommitHorizontal,\n  Link,\n  Mail,\n  MapPin,\n  MessageSquare,\n  MoreHorizontal,\n  Star,\n} from 'lucide-react'\nimport { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\n\ninterface DetailRow {\n  icon: ComponentType<{ className?: string }>\n  label: string\n  value: string\n}\n\ninterface ActivityItem {\n  icon: ComponentType<{ className?: string }>\n  sentence: string\n  time: string\n}\n\ninterface ProjectCard {\n  name: string\n  description: string\n  progress: number\n}\n\nconst details: DetailRow[] = [\n  { icon: Mail, label: 'Email', value: 'amara@acme.com' },\n  { icon: MapPin, label: 'Location', value: 'Lisbon, Portugal' },\n  { icon: CalendarDays, label: 'Joined', value: 'March 2023' },\n  { icon: Link, label: 'Website', value: 'amaraosei.dev' },\n]\n\nconst activity: ActivityItem[] = [\n  { icon: GitCommitHorizontal, sentence: 'Pushed 6 commits to design-tokens', time: '2h ago' },\n  { icon: MessageSquare, sentence: 'Commented on \"Sidebar collapse behavior\"', time: '5h ago' },\n  { icon: FilePlus2, sentence: 'Created project Marketing site refresh', time: 'Yesterday' },\n  { icon: Star, sentence: 'Starred repository uipkge-ui', time: '3d ago' },\n]\n\nconst projects: ProjectCard[] = [\n  { name: 'Design tokens', description: 'Shared OKLCH palette and theme bindings.', progress: 92 },\n  { name: 'Marketing site', description: 'Astro rebuild of the public landing pages.', progress: 64 },\n  { name: 'Component audit', description: 'Parity pass across Vue and React mirrors.', progress: 41 },\n  { name: 'Docs search', description: 'Client-side fuzzy search over registry items.', progress: 18 },\n]\n\nexport function UserProfilePage() {\n  return (\n    <div\n      data-slot=\"user-profile-page\"\n      className=\"bg-background border-border overflow-hidden rounded-xl border shadow-xs\"\n    >\n      <div className=\"from-primary/20 via-primary/5 h-32 bg-gradient-to-br to-transparent\" aria-hidden=\"true\" />\n\n      <div className=\"px-6 pb-6\">\n        <div className=\"ring-background -mt-10 ml-6 flex size-20 items-center justify-center rounded-full ring-4\">\n          <Avatar size=\"2xl\" className=\"size-20\">\n            <AvatarImage src=\"https://i.pravatar.cc/160?img=47\" alt=\"Amara Osei\" />\n            <AvatarFallback>AO</AvatarFallback>\n          </Avatar>\n        </div>\n\n        <div className=\"mt-4 flex flex-wrap items-start justify-between gap-4\">\n          <div>\n            <div className=\"flex flex-wrap items-center gap-2\">\n              <h1 className=\"text-xl font-semibold tracking-tight\">Amara Osei</h1>\n              <Badge variant=\"secondary\">Design engineer</Badge>\n            </div>\n            <p className=\"text-muted-foreground mt-1 text-sm\">@amara</p>\n          </div>\n          <div className=\"flex items-center gap-2\">\n            <Button variant=\"outline\" size=\"sm\">\n              Edit profile\n            </Button>\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"ghost\" size=\"icon\" aria-label=\"More actions\">\n                  <MoreHorizontal className=\"size-4\" />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\">\n                <DropdownMenuItem>Copy profile link</DropdownMenuItem>\n                <DropdownMenuItem>Share…</DropdownMenuItem>\n                <DropdownMenuSeparator />\n                <DropdownMenuItem variant=\"destructive\">Block user</DropdownMenuItem>\n              </DropdownMenuContent>\n            </DropdownMenu>\n          </div>\n        </div>\n\n        <p className=\"mt-4 text-sm\">\n          <span className=\"font-semibold\">24</span> <span className=\"text-muted-foreground\">Projects</span>\n          <span className=\"font-semibold\">1,248</span> <span className=\"text-muted-foreground\">Followers</span>\n          <span className=\"font-semibold\">380</span> <span className=\"text-muted-foreground\">Following</span>\n        </p>\n\n        <Tabs defaultValue=\"overview\" className=\"mt-6 gap-4\">\n          <TabsList>\n            <TabsTrigger value=\"overview\">Overview</TabsTrigger>\n            <TabsTrigger value=\"activity\">Activity</TabsTrigger>\n            <TabsTrigger value=\"projects\">Projects</TabsTrigger>\n          </TabsList>\n\n          <TabsContent value=\"overview\" className=\"space-y-6 pt-2\">\n            <p className=\"max-w-prose text-sm leading-relaxed\">\n              Design engineer focused on token systems and component architecture. Previously at a fintech startup, now\n              building the shared UI language for Acme. Writes about OKLCH color and registry-driven workflows.\n            </p>\n            <Separator />\n            <dl className=\"grid gap-x-8 gap-y-4 sm:grid-cols-2\">\n              {details.map((detail) => (\n                <div key={detail.label} className=\"flex items-center gap-3\">\n                  <detail.icon className=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n                  <dt className=\"text-muted-foreground text-sm\">{detail.label}</dt>\n                  <dd className=\"ml-auto text-sm font-medium\">{detail.value}</dd>\n                </div>\n              ))}\n            </dl>\n          </TabsContent>\n\n          <TabsContent value=\"activity\" className=\"pt-2\">\n            <ul className=\"divide-y\">\n              {activity.map((item) => (\n                <li key={item.sentence} className=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\">\n                  <span className=\"bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md\">\n                    <item.icon className=\"size-4\" aria-hidden=\"true\" />\n                  </span>\n                  <p className=\"min-w-0 flex-1 truncate text-sm\">{item.sentence}</p>\n                  <time className=\"text-muted-foreground text-xs whitespace-nowrap\">{item.time}</time>\n                </li>\n              ))}\n            </ul>\n          </TabsContent>\n\n          <TabsContent value=\"projects\" className=\"pt-2\">\n            <div className=\"grid gap-4 sm:grid-cols-2\">\n              {projects.map((project) => (\n                <Card key={project.name}>\n                  <CardHeader>\n                    <CardTitle className=\"text-sm font-medium\">{project.name}</CardTitle>\n                    <CardDescription className=\"truncate text-sm\">{project.description}</CardDescription>\n                  </CardHeader>\n                  <CardContent className=\"flex items-center gap-3\">\n                    <Progress value={project.progress} className=\"flex-1\" />\n                    <span className=\"text-muted-foreground text-xs tabular-nums\">{project.progress}%</span>\n                  </CardContent>\n                </Card>\n              ))}\n            </div>\n          </TabsContent>\n        </Tabs>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "~/components/blocks/UserProfilePage.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/avatar.json",
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/dropdown-menu.json",
    "https://uipkge.dev/r/react/progress.json",
    "https://uipkge.dev/r/react/separator.json",
    "https://uipkge.dev/r/react/tabs.json"
  ],
  "description": "Profile page composition: gradient cover banner with an overlapping ringed avatar, identity row with role badge plus edit button and a kebab actions menu, an inline follower stats row, and tabs for Overview (bio + icon detail rows), Activity (muted-tile feed), and Projects (progress cards). All data is hardcoded inline for you to replace.",
  "categories": [
    "auth",
    "app"
  ]
}