{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-5",
  "type": "registry:component",
  "title": "Tabs 5",
  "description": "Tabs 5. A set of layered sections of content—known as tab panels—that are displayed one at a time.",
  "dependencies": [
    "@tabler/icons-react"
  ],
  "registryDependencies": [
    "tabs"
  ],
  "files": [
    {
      "path": "components/watermelon/tabs-5.tsx",
      "type": "registry:component",
      "content": "import {\n  IconAdjustmentsHorizontal,\n  IconShieldLock,\n  IconUserCircle,\n} from '@tabler/icons-react';\n\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/components/base-ui/tabs';\n\nconst settings = [\n  {\n    name: 'Profile',\n    value: 'profile',\n    icon: IconUserCircle,\n    content: (\n      <>\n        Personalize your{' '}\n        <span className=\"text-foreground font-semibold\">digital identity</span>.\n        Update your avatar, bio, and social links to show the world who you are\n        and what you're building.\n      </>\n    ),\n  },\n  {\n    name: 'Preferences',\n    value: 'preferences',\n    icon: IconAdjustmentsHorizontal,\n    content: (\n      <>\n        Fine-tune your{' '}\n        <span className=\"text-foreground font-semibold\">user experience</span>.\n        Adjust your theme, language, and notification settings to perfectly\n        match your daily workflow.\n      </>\n    ),\n  },\n  {\n    name: 'Security',\n    value: 'security',\n    icon: IconShieldLock,\n    content: (\n      <>\n        Fortify your{' '}\n        <span className=\"text-foreground font-semibold\">account barriers</span>.\n        Manage your passwords, two-factor authentication, and connected devices\n        for maximum data privacy.\n      </>\n    ),\n  },\n];\n\nconst Tabs5 = () => {\n  return (\n    <Tabs\n      defaultValue=\"profile\"\n      className=\"flex gap-4\"\n    >\n      <TabsList className=\"bg-muted flex flex-row gap-2 rounded-2xl px-1 py-2 !h-10 sm:!h-14\">\n        {settings.map(({ icon: Icon, name, value }) => (\n          <TabsTrigger\n            key={value}\n            value={value}\n            className=\"data-[state=active]:bg-background data-[state=active]:text-primary dark:data-[state=active]:bg-muted/80 flex flex-1 flex-col items-center justify-center gap-1.5 rounded-xl px-2 py-3 text-[10px] font-bold tracking-wider uppercase transition-all data-[state=active]:shadow-lg h-8 sm:h-12\"\n          >\n            <Icon size={20} stroke={2} />\n            <span className=\"hidden sm:inline\">{name}</span>\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n        {settings.map((tab) => (\n          <TabsContent\n            key={tab.value}\n            value={tab.value}\n            className=\"animate-in fade-in duration-500\"\n          >\n            <h3 className=\"mb-2 text-lg font-bold tracking-tight\">\n              {tab.name}\n            </h3>\n            <p className=\"text-muted-foreground text-sm leading-relaxed\">\n              {tab.content}\n            </p>\n          </TabsContent>\n        ))}\n    </Tabs>\n  );\n};\n\nexport default Tabs5;\n"
    }
  ]
}