{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-23",
  "type": "registry:component",
  "title": "Tabs 23",
  "description": "Tabs 23. A set of layered sections of content—known as tab panels—that are displayed one at a time.",
  "dependencies": [],
  "registryDependencies": [
    "badge",
    "tabs"
  ],
  "files": [
    {
      "path": "components/watermelon/tabs-23.tsx",
      "type": "registry:component",
      "content": "import { Badge } from '@/components/base-ui/badge';\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/components/base-ui/tabs';\n\nconst inbox = [\n  {\n    name: 'Mentions',\n    value: 'mentions',\n    count: 3,\n    items: [\n      {\n        user: '@marcus_dev',\n        time: '10m ago',\n        text: 'Mentioned you in #frontend-team: \"Could you review the new dropdown semantics?\"',\n      },\n      {\n        user: '@sarah',\n        time: '1h ago',\n        text: 'Mentioned you in PR #405: \"Fixed the alignment issue here, what do you think?\"',\n      },\n      {\n        user: '@design_bot',\n        time: '2h ago',\n        text: 'Tagged you in Figma: \"New assets uploaded for the dashboard redesign\"',\n      },\n    ],\n  },\n  {\n    name: 'Direct',\n    value: 'direct',\n    count: 1,\n    items: [\n      {\n        user: '@alex_boss',\n        time: '5m ago',\n        text: '\"Hey, do you have a minute for a quick sync before the client meeting?\"',\n      },\n    ],\n  },\n  {\n    name: 'System',\n    value: 'system',\n    count: 2,\n    items: [\n      {\n        user: 'Security',\n        time: 'Yesterday',\n        text: 'New login detected from unusual location. Please review your active sessions.',\n      },\n      {\n        user: 'Billing',\n        time: '2 days ago',\n        text: 'Your upcoming invoice is available. No action is required.',\n      },\n    ],\n  },\n];\n\nconst Tabs23 = () => {\n  return (\n    <Tabs defaultValue=\"mentions\" orientation=\"vertical\" className=\"w-full flex gap-3 sm:gap-8 min-h-[200px] px-1\">\n      <TabsList className=\"bg-muted h-full shrink-0 flex-col gap-2 rounded-2xl p-1\">\n        {inbox.map((tab) => (\n          <TabsTrigger\n            key={tab.value}\n            value={tab.value}\n            className=\"group hover:bg-muted/50 data-[state=active]:border-primary/20 data-[state=active]:bg-primary/10 data-[state=active]:text-primary flex w-full items-center justify-between gap-1 sm:gap-1.5 rounded-xl border border-transparent px-2 sm:px-3 py-1 font-medium transition-all data-[state=active]:shadow-sm text-[11px] sm:text-sm\"\n          >\n            {tab.name}\n            {tab.count > 0 && (\n              <Badge className=\"group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground h-4 min-w-4 sm:h-5 sm:min-w-5 px-1 sm:px-1.5 tabular-nums transition-colors text-[9px] sm:text-[10px]\">\n                {tab.count}\n              </Badge>\n            )}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n      <div className=\"flex-1\">\n        {inbox.map((tab) => (\n          <TabsContent\n            key={tab.value}\n            value={tab.value}\n            className=\"animate-in fade-in slide-in-from-right-4 m-0 duration-500\"\n          >\n            <h4 className=\"text-foreground mb-4 sm:mb-6 text-lg sm:text-2xl font-bold tracking-tight\">\n              {tab.name}\n            </h4>\n\n            <div className=\"relative flex flex-col gap-4 sm:gap-6\">\n              <div className=\"bg-border/40 absolute top-4 bottom-4 left-[15px] sm:left-[19px] w-px\" />\n\n              {tab.items.map((item, idx) => (\n                <div key={idx} className=\"group flex items-start gap-3 sm:gap-4\">\n                  <div className=\"bg-background border-muted group-hover:border-primary/50 z-10 flex h-8 w-8 sm:h-10 sm:w-10 shrink-0 items-center justify-center rounded-full border-2 shadow-sm transition-colors\">\n                    <span className=\"text-muted-foreground group-hover:text-primary text-[10px] sm:text-xs font-bold transition-colors\">\n                      {item.user\n                        .charAt(item.user.startsWith('@') ? 1 : 0)\n                        .toUpperCase()}\n                    </span>\n                  </div>\n                  <div className=\"flex flex-col gap-1 sm:gap-1.5 pt-0.5\">\n                    <div className=\"flex items-center gap-1.5 sm:gap-2.5 hidden sm:block\">\n                      <span className=\"text-foreground font-semibold text-[12px] sm:text-sm mr-2\">\n                        {item.user}\n                      </span>\n                      <span className=\"bg-muted text-muted-foreground rounded-md px-1.5 py-0.5 text-[8px] sm:text-[10px] tracking-wider uppercase\">\n                        {item.time}\n                      </span>\n                    </div>\n                    <p className=\"text-muted-foreground max-w-sm text-[11px] sm:text-sm leading-relaxed\">\n                      {item.text}\n                    </p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </TabsContent>\n        ))}\n      </div>\n    </Tabs>\n  );\n};\n\nexport default Tabs23;\n"
    }
  ]
}