{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "user-profile-page",
  "title": "User Profile Page",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-angular/blocks/user-profile-page/user-profile-page.component.ts",
      "content": "// Profile page composition: gradient cover banner with an overlapping ringed avatar,\n// identity row with role badge plus edit button and a kebab actions menu, an inline\n// follower stats row, and tabs for Overview (bio + icon detail rows), Activity\n// (muted-tile feed), and Projects (progress cards). Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport {\n  CalendarDays,\n  FilePlus2,\n  GitCommitHorizontal,\n  Link,\n  LucideAngularModule,\n  Mail,\n  MapPin,\n  MessageSquare,\n  MoreHorizontal,\n  Star,\n  type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n  UiCardComponent,\n  UiCardContentComponent,\n  UiCardDescriptionComponent,\n  UiCardHeaderComponent,\n  UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n  UiDropdownMenuComponent,\n  UiDropdownMenuContentComponent,\n  UiDropdownMenuItemComponent,\n  UiDropdownMenuSeparatorComponent,\n  UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n  UiTabsComponent,\n  UiTabsContentComponent,\n  UiTabsListComponent,\n  UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\ninterface DetailRow {\n  icon: LucideIconData\n  label: string\n  value: string\n}\n\ninterface ActivityItem {\n  icon: LucideIconData\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\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-user-profile-page, [ui-user-profile-page]',\n  standalone: true,\n  // React renders the root <div> itself: the host stays out of layout and `class` goes to the root.\n  host: { '[attr.class]': '\"contents\"' },\n  imports: [\n    LucideAngularModule,\n    UiAvatarComponent,\n    UiAvatarFallbackComponent,\n    UiAvatarImageComponent,\n    UiBadgeComponent,\n    UiButtonComponent,\n    UiCardComponent,\n    UiCardContentComponent,\n    UiCardDescriptionComponent,\n    UiCardHeaderComponent,\n    UiCardTitleComponent,\n    UiDropdownMenuComponent,\n    UiDropdownMenuContentComponent,\n    UiDropdownMenuItemComponent,\n    UiDropdownMenuSeparatorComponent,\n    UiDropdownMenuTriggerComponent,\n    UiProgressComponent,\n    UiSeparatorComponent,\n    UiTabsComponent,\n    UiTabsContentComponent,\n    UiTabsListComponent,\n    UiTabsTriggerComponent,\n  ],\n  template: `\n    <div data-slot=\"user-profile-page\" [class]=\"rootClass\">\n      <div class=\"from-primary/20 via-primary/5 h-32 bg-gradient-to-br to-transparent\" aria-hidden=\"true\"></div>\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          <ui-avatar size=\"2xl\" class=\"size-20\">\n            <ui-avatar-image src=\"https://i.pravatar.cc/160?img=47\" alt=\"Amara Osei\" />\n            <ui-avatar-fallback>AO</ui-avatar-fallback>\n          </ui-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              <span ui-badge variant=\"secondary\">Design engineer</span>\n            </div>\n            <p class=\"text-muted-foreground mt-1 text-sm\">&#64;amara</p>\n          </div>\n          <div class=\"flex items-center gap-2\">\n            <button ui-button variant=\"outline\" size=\"sm\">Edit profile</button>\n            <ui-dropdown-menu>\n              <button ui-button ui-dropdown-menu-trigger variant=\"ghost\" size=\"icon\" aria-label=\"More actions\">\n                <lucide-icon [img]=\"MoreHorizontal\" class=\"size-4\" />\n              </button>\n              <ui-dropdown-menu-content align=\"end\">\n                <ui-dropdown-menu-item>Copy profile link</ui-dropdown-menu-item>\n                <ui-dropdown-menu-item>Share…</ui-dropdown-menu-item>\n                <ui-dropdown-menu-separator />\n                <ui-dropdown-menu-item variant=\"destructive\">Block user</ui-dropdown-menu-item>\n              </ui-dropdown-menu-content>\n            </ui-dropdown-menu>\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        <ui-tabs defaultValue=\"overview\" class=\"mt-6 gap-4\">\n          <ui-tabs-list>\n            <button ui-tabs-trigger value=\"overview\">Overview</button>\n            <button ui-tabs-trigger value=\"activity\">Activity</button>\n            <button ui-tabs-trigger value=\"projects\">Projects</button>\n          </ui-tabs-list>\n\n          <ui-tabs-content 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            <ui-separator />\n            <dl class=\"grid gap-x-8 gap-y-4 sm:grid-cols-2\">\n              @for (detail of details; track detail.label) {\n                <div class=\"flex items-center gap-3\">\n                  <lucide-icon [img]=\"detail.icon\" class=\"text-muted-foreground size-4 shrink-0\" />\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              }\n            </dl>\n          </ui-tabs-content>\n\n          <ui-tabs-content value=\"activity\" class=\"pt-2\">\n            <ul class=\"divide-y\">\n              @for (item of activity; track item.sentence) {\n                <li class=\"flex items-center gap-3 py-3 first:pt-0 last:pb-0\">\n                  <span\n                    class=\"bg-muted text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md\"\n                  >\n                    <lucide-icon [img]=\"item.icon\" class=\"size-4\" />\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              }\n            </ul>\n          </ui-tabs-content>\n\n          <ui-tabs-content value=\"projects\" class=\"pt-2\">\n            <div class=\"grid gap-4 sm:grid-cols-2\">\n              @for (project of projects; track project.name) {\n                <div ui-card>\n                  <div ui-card-header>\n                    <h3 ui-card-title class=\"text-sm font-medium\">{{ project.name }}</h3>\n                    <p ui-card-description class=\"truncate text-sm\">{{ project.description }}</p>\n                  </div>\n                  <div ui-card-content class=\"flex items-center gap-3\">\n                    <ui-progress [value]=\"project.progress\" class=\"flex-1\" />\n                    <span class=\"text-muted-foreground text-xs tabular-nums\">{{ project.progress }}%</span>\n                  </div>\n                </div>\n              }\n            </div>\n          </ui-tabs-content>\n        </ui-tabs>\n      </div>\n    </div>\n  `,\n})\nexport class UiUserProfilePageComponent {\n  protected readonly MoreHorizontal = MoreHorizontal\n  protected readonly details = details\n  protected readonly activity = activity\n  protected readonly projects = projects\n\n  @Input('class') className?: string\n\n  get rootClass(): string {\n    return cn('bg-background border-border overflow-hidden rounded-xl border shadow-xs', this.className)\n  }\n}\n",
      "type": "registry:page",
      "target": "~/src/app/components/blocks/user-profile-page/user-profile-page.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/user-profile-page/index.ts",
      "content": "export { UiUserProfilePageComponent } from './user-profile-page.component'\n",
      "type": "registry:page",
      "target": "~/src/app/components/blocks/user-profile-page/index.ts"
    }
  ],
  "dependencies": [
    "lucide-angular"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/angular/avatar.json",
    "https://uipkge.dev/r/angular/badge.json",
    "https://uipkge.dev/r/angular/button.json",
    "https://uipkge.dev/r/angular/card.json",
    "https://uipkge.dev/r/angular/dropdown-menu.json",
    "https://uipkge.dev/r/angular/progress.json",
    "https://uipkge.dev/r/angular/separator.json",
    "https://uipkge.dev/r/angular/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"
  ]
}