{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-page",
  "title": "Profile Page",
  "description": "User profile page with cover image, avatar, stats, tabbed content area, and sidebar section.",
  "registryDependencies": [
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-theme.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/adminlte-tabs.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/box.json",
    "https://raw.githubusercontent.com/dnachavez/adminlte-next/master/public/r/profile-card.json"
  ],
  "files": [
    {
      "path": "registry/new-york/profile-page/blocks/profile-page.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/registry/new-york/adminlte-theme/lib/cn\"\n\ninterface ProfileStat {\n  label: string\n  value: string | number\n  href?: string\n}\n\ninterface ProfilePageProps extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  avatarUrl: string\n  role?: string\n  coverImageUrl?: string\n  coverColor?: string\n  stats?: ProfileStat[]\n  tabs?: { id: string; label: string; icon?: React.ReactNode; content: React.ReactNode }[]\n  defaultTab?: string\n  sidebar?: React.ReactNode\n}\n\nfunction ProfilePage({\n  className,\n  name,\n  avatarUrl,\n  role,\n  coverImageUrl,\n  coverColor = \"#3c8dbc\",\n  stats = [],\n  tabs = [],\n  defaultTab,\n  sidebar,\n  ...props\n}: ProfilePageProps) {\n  const [activeTab, setActiveTab] = React.useState(defaultTab || tabs[0]?.id || \"\")\n\n  return (\n    <div className={cn(\"\", className)} {...props}>\n      <div className=\"flex gap-[15px] flex-col lg:flex-row\">\n        {/* Left column */}\n        <div className=\"w-full lg:w-[280px] flex-shrink-0\">\n          <div className=\"bg-white shadow-[0_1px_1px_rgba(0,0,0,0.1)] rounded-[3px] mb-[20px]\">\n            {/* Cover + Avatar */}\n            <div\n              className=\"relative h-[150px] rounded-t-[3px] flex items-end justify-center\"\n              style={{\n                background: coverImageUrl\n                  ? `url(${coverImageUrl}) center/cover no-repeat`\n                  : coverColor,\n              }}\n            >\n              <img\n                src={avatarUrl}\n                alt={name}\n                className=\"w-[100px] h-[100px] rounded-full border-[3px] border-white shadow-[0_2px_4px_rgba(0,0,0,0.2)] translate-y-[50px]\"\n              />\n            </div>\n\n            <div className=\"pt-[60px] pb-[20px] text-center\">\n              <h3 className=\"text-[20px] font-semibold m-0\">{name}</h3>\n              {role && <p className=\"text-[14px] text-[#999] mt-[5px]\">{role}</p>}\n            </div>\n\n            {/* Stats */}\n            {stats.length > 0 && (\n              <div className=\"border-t border-t-[#f4f4f4]\">\n                <div className=\"flex\">\n                  {stats.map((stat, i) => (\n                    <a\n                      key={i}\n                      href={stat.href || \"#\"}\n                      className=\"flex-1 text-center py-[10px] text-[14px] no-underline text-[#444] border-r border-r-[#f4f4f4] last:border-r-0 hover:bg-[#f9f9f9]\"\n                    >\n                      <span className=\"block font-bold text-[18px]\">{stat.value}</span>\n                      <span className=\"block text-[12px] text-[#999] uppercase\">{stat.label}</span>\n                    </a>\n                  ))}\n                </div>\n              </div>\n            )}\n          </div>\n\n          {sidebar}\n        </div>\n\n        {/* Right column - Tabs */}\n        {tabs.length > 0 && (\n          <div className=\"flex-1\">\n            <div className=\"bg-white shadow-[0_1px_1px_rgba(0,0,0,0.1)] rounded-[3px]\">\n              <ul className=\"flex list-none m-0 p-0 border-b border-b-[#f4f4f4]\">\n                {tabs.map((tab) => (\n                  <li key={tab.id}>\n                    <button\n                      type=\"button\"\n                      className={cn(\n                        \"block px-[15px] py-[10px] text-[14px] border-0 cursor-pointer transition-colors\",\n                        activeTab === tab.id\n                          ? \"bg-white text-[#444] border-b-[3px] border-b-[#3c8dbc] -mb-[1px]\"\n                          : \"bg-transparent text-[#444] hover:bg-[#f4f4f4]\"\n                      )}\n                      onClick={() => setActiveTab(tab.id)}\n                    >\n                      {tab.icon && <span className=\"mr-[5px]\">{tab.icon}</span>}\n                      {tab.label}\n                    </button>\n                  </li>\n                ))}\n              </ul>\n              <div className=\"p-[15px]\">\n                {tabs.map((tab) => (\n                  <div key={tab.id} className={activeTab === tab.id ? \"block\" : \"hidden\"}>\n                    {tab.content}\n                  </div>\n                ))}\n              </div>\n            </div>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { ProfilePage }\nexport type { ProfilePageProps, ProfileStat }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}