{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-25",
  "type": "registry:component",
  "title": "Tabs 25",
  "description": "Tabs 25. 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-25.tsx",
      "type": "registry:component",
      "content": "import { IconDotsVertical, IconMail } from '@tabler/icons-react';\n\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/components/base-ui/tabs';\n\nconst teams = [\n  {\n    name: 'Engineering',\n    value: 'engineering',\n    members: [\n      { name: 'Alice Chen', role: 'Frontend Lead', status: 'Online' },\n      { name: 'Bob Smith', role: 'Backend Developer', status: 'Busy' },\n      { name: 'Charlie Davis', role: 'DevOps Engineer', status: 'Offline' },\n    ],\n  },\n  {\n    name: 'Design',\n    value: 'design',\n    members: [\n      { name: 'Diana Prince', role: 'Product Designer', status: 'Online' },\n      { name: 'Evan Wright', role: 'UX Researcher', status: 'Online' },\n    ],\n  },\n  {\n    name: 'Marketing',\n    value: 'marketing',\n    members: [\n      {\n        name: 'Fiona Gallagher',\n        role: 'Content Strategist',\n        status: 'Offline',\n      },\n      { name: 'George Miller', role: 'Growth Hacker', status: 'Busy' },\n      { name: 'Hannah Lee', role: 'Social Media Manager', status: 'Online' },\n    ],\n  },\n];\n\nconst Tabs25 = () => {\n  return (\n    <Tabs defaultValue=\"engineering\" className=\"flex flex-col gap-2\">\n      <TabsList className=\"bg-background flex h-auto w-fit gap-2 rounded-none p-0\">\n        {teams.map((tab) => (\n          <TabsTrigger\n            key={tab.value}\n            value={tab.value}\n            className=\"text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground data-[state=active]:bg-primary data-[state=active]:text-primary-foreground dark:data-[state=active]:bg-primary rounded-xl border border-transparent px-3 py-1 font-medium shadow-none transition-all duration-300 data-[state=active]:border-transparent data-[state=active]:shadow-md dark:data-[state=active]:border-transparent\"\n          >\n            {tab.name}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n      <div className=\"mt-2 w-full\">\n        {teams.map((tab) => (\n          <TabsContent\n            key={tab.value}\n            value={tab.value}\n            className=\"animate-in fade-in slide-in-from-bottom-2 m-0 duration-300\"\n          >\n            <div className=\"flex flex-col\">\n              {tab.members.map((member, idx) => (\n                <div\n                  key={idx}\n                  className=\"group border-border/40 hover:bg-muted/20 flex items-center justify-between border-b py-3.5 transition-colors last:border-0\"\n                >\n                  <div className=\"flex items-center gap-4 px-2\">\n                    <div className=\"bg-muted text-muted-foreground relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full font-bold shadow-sm\">\n                      {member.name.charAt(0)}\n                      <span\n                        className={`border-background absolute right-0 bottom-0 h-3 w-3 rounded-full border-2 ${\n                          member.status === 'Online'\n                            ? 'bg-emerald-500'\n                            : member.status === 'Busy'\n                              ? 'bg-amber-500'\n                              : 'bg-zinc-400'\n                        }`}\n                      />\n                    </div>\n                    <div className=\"flex flex-col\">\n                      <span className=\"text-foreground text-sm font-semibold\">\n                        {member.name}\n                      </span>\n                      <span className=\"text-muted-foreground text-xs\">\n                        {member.role}\n                      </span>\n                    </div>\n                  </div>\n\n                  <div className=\"flex items-center gap-1 pr-2 opacity-0 transition-opacity group-hover:opacity-100\">\n                    <button className=\"text-muted-foreground hover:bg-muted hover:text-foreground rounded-md p-2 transition-colors\">\n                      <IconMail size={16} />\n                    </button>\n                    <button className=\"text-muted-foreground hover:bg-muted hover:text-foreground rounded-md p-2 transition-colors\">\n                      <IconDotsVertical size={16} />\n                    </button>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </TabsContent>\n        ))}\n      </div>\n    </Tabs>\n  );\n};\n\nexport default Tabs25;\n"
    }
  ]
}