{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-18",
  "type": "registry:component",
  "title": "Tabs 18",
  "description": "Tabs 18. A set of layered sections of content—known as tab panels—that are displayed one at a time.",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "tabs"
  ],
  "files": [
    {
      "path": "components/watermelon/tabs-18.tsx",
      "type": "registry:component",
      "content": "import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/base-ui/tabs'\nimport { Button } from '@/components/ui/button'\n\nconst taskBoard = [\n  {\n    name: 'To-Do',\n    value: 'todo',\n    count: 12,\n    badgeColor: 'bg-zinc-200 text-zinc-800 dark:bg-zinc-800 dark:text-zinc-200 group-data-[state=active]:bg-zinc-700 group-data-[state=active]:text-zinc-100 dark:group-data-[state=active]:bg-zinc-300 dark:group-data-[state=active]:text-zinc-900',\n    content:\n      'Review your pending items. Outstanding tasks that need your attention soon, including project briefs, design reviews, and client follow-ups.'\n  },\n  {\n    name: 'In Progress',\n    value: 'in-progress',\n    count: 4,\n    badgeColor: 'bg-blue-100 text-blue-800 dark:bg-blue-900/50 dark:text-blue-200 group-data-[state=active]:bg-zinc-700 group-data-[state=active]:text-zinc-100 dark:group-data-[state=active]:bg-zinc-300 dark:group-data-[state=active]:text-zinc-900',\n    content:\n      'Track active assignments. Work that is currently being tackled by you or your team, along with real-time status updates and collaboration notes.'\n  },\n  {\n    name: 'Done',\n    value: 'done',\n    count: 28,\n    badgeColor: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/50 dark:text-emerald-200 group-data-[state=active]:bg-zinc-700 group-data-[state=active]:text-zinc-100 dark:group-data-[state=active]:bg-zinc-300 dark:group-data-[state=active]:text-zinc-900',\n    content:\n      'View completed objectives. A historical log of finished tasks and resolved tickets that have been verified, approved, and officially closed.'\n  }\n]\n\nconst Tabs18 = () => {\n  return (\n      <Tabs defaultValue='todo' orientation='vertical' className='w-full flex gap-2.5 sm:gap-6 min-h-[200px] px-1'>\n        <TabsList className='bg-transparent h-full flex-col shrink-0 justify-start space-y-1 p-0 rounded-none'>\n          {taskBoard.map(tab => (\n            <TabsTrigger\n              key={tab.value}\n              value={tab.value}\n              className='group w-full justify-between rounded-xl px-2 sm:px-4 py-1 data-[state=active]:bg-primary data-[state=active]:text-zinc-50 dark:data-[state=active]:bg-zinc-100 dark:data-[state=active]:text-zinc-900 data-[state=active]:shadow-md dark:data-[state=active]:border-transparent transition-all'\n            >\n              <span className='font-semibold text-[11px] sm:text-sm'>{tab.name}</span>\n              <span\n                className={`px-1.5 sm:px-2 py-0.5 rounded-md text-[9px] sm:text-[10px] font-bold tabular-nums transition-colors ${tab.badgeColor}`}\n              >\n                {tab.count}\n              </span>\n            </TabsTrigger>\n          ))}\n        </TabsList>\n\n        <div className='flex-1 py-1'>\n          {taskBoard.map(tab => (\n            <TabsContent key={tab.value} value={tab.value} className='m-0 animate-in slide-in-from-right-4 fade-in duration-500'>\n              <div className='rounded-2xl border bg-card p-4 sm:p-6 flex flex-col gap-2'>\n                <div className='flex items-center justify-between border-b border-border/50 pb-3'>\n                  <h4 className='text-base sm:text-lg font-bold tracking-tight text-foreground'>\n                    {tab.name} Queue\n                  </h4>\n                  <div className='text-muted-foreground hidden sm:block text-[10px] sm:text-xs font-bold bg-muted px-2 py-0.5 sm:px-3 sm:py-1 rounded-full'>\n                    {tab.count} Items\n                  </div>\n                </div>\n                <p className='mt-1 text-muted-foreground text-[13px] sm:text-sm'>\n                  {tab.content}\n                </p>\n                <div className='flex justify-end'>\n                  <Button variant=\"link\" className='h-auto p-0 text-[11px] sm:text-xs font-semibold text-primary hover:underline underline-offset-4'>\n                    View all {tab.name.toLowerCase()} tasks\n                  </Button>\n                </div>\n              </div>\n            </TabsContent>\n          ))}\n        </div>\n      </Tabs>\n  )\n}\n\nexport default Tabs18\n"
    }
  ]
}