{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-24",
  "type": "registry:component",
  "title": "Tabs 24",
  "description": "Tabs 24. 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-24.tsx",
      "type": "registry:component",
      "content": "import {\n  IconArrowDownRight,\n  IconArrowUpRight,\n  IconMinus,\n} from '@tabler/icons-react';\n\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/components/base-ui/tabs';\n\nconst performanceOverview = [\n  {\n    name: 'Traffic',\n    value: 'traffic',\n    stats: [\n      { label: 'Unique Visitors', value: '124.5K', trend: '+12%', type: 'up' },\n      { label: 'Bounce Rate', value: '42.3%', trend: '-4%', type: 'down' },\n      { label: 'Session Duration', value: '3m 14s', trend: '+2s', type: 'up' },\n      { label: 'Direct Traffic', value: '28%', trend: '0%', type: 'neutral' },\n    ],\n  },\n  {\n    name: 'Sales',\n    value: 'sales',\n    stats: [\n      { label: 'Gross Revenue', value: '$84,230', trend: '+18%', type: 'up' },\n      { label: 'Refunds Issued', value: '$1,200', trend: '+2%', type: 'down' },\n      { label: 'Avg Order Value', value: '$68.50', trend: '+5%', type: 'up' },\n      { label: 'Conversion Rate', value: '3.2%', trend: '-0.4%', type: 'down' },\n    ],\n  },\n  {\n    name: 'Acquisition',\n    value: 'acquisition',\n    stats: [\n      { label: 'Blended CAC', value: '$12.40', trend: '-8%', type: 'up' },\n      { label: 'Organic Search', value: '45K', trend: '+14%', type: 'up' },\n      { label: 'Social Media', value: '18K', trend: '+2%', type: 'up' },\n      { label: 'Email Marketing', value: '22K', trend: '-1%', type: 'down' },\n    ],\n  },\n];\n\nconst Tabs24 = () => {\n  return (\n    <Tabs defaultValue=\"traffic\" orientation=\"vertical\" className=\"w-full flex gap-3 sm:gap-10 min-h-[200px] px-1\">\n      <TabsList className=\"h-auto shrink-0 flex-col gap-2 rounded-none bg-transparent p-0\">\n        {performanceOverview.map((tab) => (\n          <TabsTrigger\n            key={tab.value}\n            value={tab.value}\n            className=\"text-muted-foreground hover:bg-muted/50 data-[state=active]:bg-background data-[state=active]:border-border data-[state=active]:text-foreground w-full !justify-center rounded-xl border border-transparent px-1.5 sm:px-2 py-1 text-center font-medium transition-all text-[11px] sm:text-sm\"\n          >\n            {tab.name}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n      <div className=\"flex-1 pb-4\">\n        {performanceOverview.map((tab) => (\n          <TabsContent\n            key={tab.value}\n            value={tab.value}\n            className=\"animate-in fade-in slide-in-from-left-4 m-0 duration-500\"\n          >\n            <h4 className=\"text-foreground mb-8 text-lg sm:text-2xl font-bold tracking-tight\">\n              {tab.name} Metrics\n            </h4>\n\n            <div className=\"grid grid-cols-2 gap-x-2 sm:gap-x-8 gap-y-5 sm:gap-y-10\">\n              {tab.stats.map((stat, idx) => (\n                <div key={idx} className=\"flex flex-col gap-1\">\n                  <span className=\"text-muted-foreground text-[10px] sm:text-xs font-bold uppercase tracking-tight\">\n                    {stat.label}\n                  </span>\n                  <div className=\"flex flex-col sm:flex-row sm:items-end gap-0.5 sm:gap-2\">\n                    <span className=\"text-foreground text-base sm:text-2xl font-bold tracking-tighter tabular-nums leading-none\">\n                      {stat.value}\n                    </span>\n                    <span\n                      className={`flex items-center pb-0 sm:pb-1.5 text-[9px] sm:text-xs font-bold ${\n                        stat.type === 'up'\n                          ? 'text-emerald-500 dark:text-emerald-400'\n                          : stat.type === 'down'\n                            ? 'text-rose-500 dark:text-rose-400'\n                            : 'text-zinc-500 dark:text-zinc-400'\n                      }`}\n                    >\n                      {stat.type === 'up' && (\n                        <IconArrowUpRight\n                          className=\"size-[10px] sm:size-[14px] mr-0.5\"\n                          stroke={3}\n                        />\n                      )}\n                      {stat.type === 'down' && (\n                        <IconArrowDownRight\n                          className=\"size-[10px] sm:size-[14px] mr-0.5\"\n                          stroke={3}\n                        />\n                      )}\n                      {stat.type === 'neutral' && (\n                        <IconMinus className=\"size-[10px] sm:size-[14px] mr-0.5\" stroke={3} />\n                      )}\n                      {stat.trend}\n                    </span>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </TabsContent>\n        ))}\n      </div>\n    </Tabs>\n  );\n};\n\nexport default Tabs24;\n"
    }
  ]
}