{
  "name": "profile-dropdown",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "dropdown-menu"
  ],
  "files": [
    {
      "type": "registry:component",
      "content": "\"use client\";\n\nimport { CreditCard, FileText, LogOut, Settings, User } from \"lucide-react\";\nimport Image from \"next/image\";\nimport Link from \"next/link\";\nimport * as React from \"react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { cn } from \"@/lib/utils\";\nimport Gemini from \"../icons/gemini\";\n\ninterface Profile {\n  name: string;\n  email: string;\n  avatar: string;\n  subscription?: string;\n  model?: string;\n}\n\ninterface MenuItem {\n  label: string;\n  value?: string;\n  href: string;\n  icon: React.ReactNode;\n  external?: boolean;\n}\n\nconst SAMPLE_PROFILE_DATA: Profile = {\n  name: \"Eugene An\",\n  email: \"eugene@kokonutui.com\",\n  avatar:\n    \"https://ferf1mheo22r9ira.public.blob.vercel-storage.com/profile-mjss82WnWBRO86MHHGxvJ2TVZuyrDv.jpeg\",\n  subscription: \"PRO\",\n  model: \"Gemini 2.0 Flash\",\n};\n\ninterface ProfileDropdownProps extends React.HTMLAttributes<HTMLDivElement> {\n  data?: Profile;\n  showTopbar?: boolean;\n}\n\nexport default function ProfileDropdown({\n  data = SAMPLE_PROFILE_DATA,\n  className,\n  ...props\n}: ProfileDropdownProps) {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const menuItems: MenuItem[] = [\n    {\n      label: \"Profile\",\n      href: \"#\",\n      icon: <User className=\"h-4 w-4\" />,\n    },\n    {\n      label: \"Model\",\n      value: data.model,\n      href: \"#\",\n      icon: <Gemini className=\"h-4 w-4\" />,\n    },\n    {\n      label: \"Subscription\",\n      value: data.subscription,\n      href: \"#\",\n      icon: <CreditCard className=\"h-4 w-4\" />,\n    },\n    {\n      label: \"Settings\",\n      href: \"#\",\n      icon: <Settings className=\"h-4 w-4\" />,\n    },\n    {\n      label: \"Terms & Policies\",\n      href: \"#\",\n      icon: <FileText className=\"h-4 w-4\" />,\n      external: true,\n    },\n  ];\n\n  return (\n    <div className={cn(\"relative\", className)} {...props}>\n      <DropdownMenu onOpenChange={setIsOpen}>\n        <div className=\"group relative\">\n          <DropdownMenuTrigger asChild>\n            <button\n              className=\"flex items-center gap-16 rounded-2xl border border-zinc-200/60 bg-white p-3 transition-all duration-200 hover:border-zinc-300 hover:bg-zinc-50/80 hover:shadow-sm focus:outline-none dark:border-zinc-800/60 dark:bg-zinc-900 dark:hover:border-zinc-700 dark:hover:bg-zinc-800/40\"\n              type=\"button\"\n            >\n              <div className=\"flex-1 text-left\">\n                <div className=\"font-medium text-sm text-zinc-900 leading-tight tracking-tight dark:text-zinc-100\">\n                  {data.name}\n                </div>\n                <div className=\"text-xs text-zinc-500 leading-tight tracking-tight dark:text-zinc-400\">\n                  {data.email}\n                </div>\n              </div>\n              <div className=\"relative\">\n                <div className=\"h-10 w-10 rounded-full bg-gradient-to-br from-purple-500 via-pink-500 to-orange-400 p-0.5\">\n                  <div className=\"h-full w-full overflow-hidden rounded-full bg-white dark:bg-zinc-900\">\n                    <Image\n                      alt={data.name}\n                      className=\"h-full w-full rounded-full object-cover\"\n                      height={36}\n                      src={data.avatar}\n                      width={36}\n                    />\n                  </div>\n                </div>\n              </div>\n            </button>\n          </DropdownMenuTrigger>\n\n          {/* Bending line indicator on the right */}\n          <div\n            className={cn(\n              \"absolute top-1/2 -right-3 -translate-y-1/2 transition-all duration-200\",\n              isOpen ? \"opacity-100\" : \"opacity-60 group-hover:opacity-100\"\n            )}\n          >\n            <svg\n              aria-hidden=\"true\"\n              className={cn(\n                \"transition-all duration-200\",\n                isOpen\n                  ? \"scale-110 text-blue-500 dark:text-blue-400\"\n                  : \"text-zinc-400 group-hover:text-zinc-600 dark:text-zinc-500 dark:group-hover:text-zinc-300\"\n              )}\n              fill=\"none\"\n              height=\"24\"\n              viewBox=\"0 0 12 24\"\n              width=\"12\"\n            >\n              <path\n                d=\"M2 4C6 8 6 16 2 20\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeLinecap=\"round\"\n                strokeWidth=\"1.5\"\n              />\n            </svg>\n          </div>\n\n          <DropdownMenuContent\n            align=\"end\"\n            className=\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-64 origin-top-right rounded-2xl border border-zinc-200/60 bg-white/95 p-2 shadow-xl shadow-zinc-900/5 backdrop-blur-sm data-[state=closed]:animate-out data-[state=open]:animate-in dark:border-zinc-800/60 dark:bg-zinc-900/95 dark:shadow-zinc-950/20\"\n            sideOffset={4}\n          >\n            <div className=\"space-y-1\">\n              {menuItems.map((item) => (\n                <DropdownMenuItem asChild key={item.label}>\n                  <Link\n                    className=\"group flex cursor-pointer items-center rounded-xl border border-transparent p-3 transition-all duration-200 hover:border-zinc-200/50 hover:bg-zinc-100/80 hover:shadow-sm dark:hover:border-zinc-700/50 dark:hover:bg-zinc-800/60\"\n                    href={item.href}\n                  >\n                    <div className=\"flex flex-1 items-center gap-2\">\n                      {item.icon}\n                      <span className=\"whitespace-nowrap font-medium text-sm text-zinc-900 leading-tight tracking-tight transition-colors group-hover:text-zinc-950 dark:text-zinc-100 dark:group-hover:text-zinc-50\">\n                        {item.label}\n                      </span>\n                    </div>\n                    <div className=\"ml-auto flex-shrink-0\">\n                      {item.value && (\n                        <span\n                          className={cn(\n                            \"rounded-md px-2 py-1 font-medium text-xs tracking-tight\",\n                            item.label === \"Model\"\n                              ? \"border border-blue-500/10 bg-blue-50 text-blue-600 dark:bg-blue-500/10 dark:text-blue-400\"\n                              : \"border border-purple-500/10 bg-purple-50 text-purple-600 dark:bg-purple-500/10 dark:text-purple-400\"\n                          )}\n                        >\n                          {item.value}\n                        </span>\n                      )}\n                    </div>\n                  </Link>\n                </DropdownMenuItem>\n              ))}\n            </div>\n\n            <DropdownMenuSeparator className=\"my-3 bg-gradient-to-r from-transparent via-zinc-200 to-transparent dark:via-zinc-800\" />\n\n            <DropdownMenuItem asChild>\n              <button\n                className=\"group flex w-full cursor-pointer items-center gap-3 rounded-xl border border-transparent bg-red-500/10 p-3 transition-all duration-200 hover:border-red-500/30 hover:bg-red-500/20 hover:shadow-sm\"\n                type=\"button\"\n              >\n                <LogOut className=\"h-4 w-4 text-red-500 group-hover:text-red-600\" />\n                <span className=\"font-medium text-red-500 text-sm group-hover:text-red-600\">\n                  Sign Out\n                </span>\n              </button>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </div>\n      </DropdownMenu>\n    </div>\n  );\n}\n",
      "path": "/components/kokonutui/profile-dropdown.tsx",
      "target": "components/kokonutui/profile-dropdown.tsx"
    },
    {
      "type": "registry:component",
      "content": "const Gemini = (props: React.SVGProps<SVGSVGElement>) => (\n  <svg\n    height=\"1em\"\n    style={{\n      flex: \"none\",\n      lineHeight: 1,\n    }}\n    viewBox=\"0 0 24 24\"\n    width=\"1em\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    {...props}\n  >\n    <title>{\"Gemini\"}</title>\n    <defs>\n      <linearGradient\n        id=\"lobe-icons-gemini-fill\"\n        x1=\"0%\"\n        x2=\"68.73%\"\n        y1=\"100%\"\n        y2=\"30.395%\"\n      >\n        <stop offset=\"0%\" stopColor=\"#1C7DFF\" />\n        <stop offset=\"52.021%\" stopColor=\"#1C69FF\" />\n        <stop offset=\"100%\" stopColor=\"#F0DCD6\" />\n      </linearGradient>\n    </defs>\n    <path\n      d=\"M12 24A14.304 14.304 0 000 12 14.304 14.304 0 0012 0a14.305 14.305 0 0012 12 14.305 14.305 0 00-12 12\"\n      fill=\"url(#lobe-icons-gemini-fill)\"\n      fillRule=\"nonzero\"\n    />\n  </svg>\n);\nexport default Gemini;\n",
      "path": "/components/icons/gemini.tsx",
      "target": "components/kokonutui/gemini.tsx"
    }
  ]
}