{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "user-profile-page",
  "title": "User Profile Page",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-vue/blocks/user-profile-page/UserProfilePage.vue",
      "content": "<script setup lang=\"ts\">\nimport type { Component } from 'vue'\nimport {\n  CalendarDays,\n  FilePlus2,\n  GitCommitHorizontal,\n  Link,\n  Mail,\n  MapPin,\n  MessageSquare,\n  MoreHorizontal,\n  Star,\n} from 'lucide-vue-next'\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: Component\n  label: string\n  value: string\n}\n\ninterface ActivityItem {\n  icon: Component\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</script>\n\n<template>\n  <div data-slot=\"user-profile-page\" class=\"bg-background border-border overflow-hidden rounded-xl border shadow-xs\">\n    <div class=\"from-primary/20 via-primary/5 h-32 bg-gradient-to-br to-transparent\" aria-hidden=\"true\" />\n\n    <div class=\"px-6 pb-6\">\n      <div class=\"ring-background -mt-10 ml-6 flex size-20 items-center justify-center rounded-full ring-4\">\n        <Avatar size=\"2xl\" class=\"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 class=\"mt-4 flex flex-wrap items-start justify-between gap-4\">\n        <div>\n          <div class=\"flex flex-wrap items-center gap-2\">\n            <h1 class=\"text-xl font-semibold tracking-tight\">Amara Osei</h1>\n            <Badge variant=\"secondary\">Design engineer</Badge>\n          </div>\n          <p class=\"text-muted-foreground mt-1 text-sm\">@amara</p>\n        </div>\n        <div class=\"flex items-center gap-2\">\n          <Button variant=\"outline\" size=\"sm\">Edit profile</Button>\n          <DropdownMenu>\n            <DropdownMenuTrigger as-child>\n              <Button variant=\"ghost\" size=\"icon\" aria-label=\"More actions\">\n                <MoreHorizontal class=\"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 class=\"mt-4 text-sm\">\n        <span class=\"font-semibold\">24</span> <span class=\"text-muted-foreground\">Projects</span>\n        <span class=\"font-semibold\">1,248</span> <span class=\"text-muted-foreground\">Followers</span>\n        <span class=\"font-semibold\">380</span> <span class=\"text-muted-foreground\">Following</span>\n      </p>\n\n      <Tabs default-value=\"overview\" class=\"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\" class=\"space-y-6 pt-2\">\n          <p class=\"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 class=\"grid gap-x-8 gap-y-4 sm:grid-cols-2\">\n            <div v-for=\"detail in details\" :key=\"detail.label\" class=\"flex items-center gap-3\">\n              <component :is=\"detail.icon\" class=\"text-muted-foreground size-4 shrink-0\" aria-hidden=\"true\" />\n              <dt class=\"text-muted-foreground text-sm\">{{ detail.label }}</dt>\n              <dd class=\"ml-auto text-sm font-medium\">{{ detail.value }}</dd>\n            </div>\n          </dl>\n        </TabsContent>\n\n        <TabsContent value=\"activity\" class=\"pt-2\">\n          <ul class=\"divide-y\">\n            <li v-for=\"item in activity\" :key=\"item.sentence\" class=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\">\n              <span class=\"bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md\">\n                <component :is=\"item.icon\" class=\"size-4\" aria-hidden=\"true\" />\n              </span>\n              <p class=\"min-w-0 flex-1 truncate text-sm\">{{ item.sentence }}</p>\n              <time class=\"text-muted-foreground text-xs whitespace-nowrap\">{{ item.time }}</time>\n            </li>\n          </ul>\n        </TabsContent>\n\n        <TabsContent value=\"projects\" class=\"pt-2\">\n          <div class=\"grid gap-4 sm:grid-cols-2\">\n            <Card v-for=\"project in projects\" :key=\"project.name\">\n              <CardHeader>\n                <CardTitle class=\"text-sm font-medium\">{{ project.name }}</CardTitle>\n                <CardDescription class=\"truncate text-sm\">{{ project.description }}</CardDescription>\n              </CardHeader>\n              <CardContent class=\"flex items-center gap-3\">\n                <Progress :model-value=\"project.progress\" class=\"flex-1\" />\n                <span class=\"text-muted-foreground text-xs tabular-nums\">{{ project.progress }}%</span>\n              </CardContent>\n            </Card>\n          </div>\n        </TabsContent>\n      </Tabs>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:page",
      "target": "~/app/components/blocks/UserProfilePage.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/avatar.json",
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/dropdown-menu.json",
    "https://uipkge.dev/r/vue/progress.json",
    "https://uipkge.dev/r/vue/separator.json",
    "https://uipkge.dev/r/vue/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"
  ]
}