{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-1",
  "type": "registry:component",
  "title": "Tabs 1",
  "description": "Tabs 1. A set of layered sections of content—known as tab panels—that are displayed one at a time.",
  "dependencies": [],
  "registryDependencies": [
    "tabs"
  ],
  "files": [
    {
      "path": "components/watermelon/tabs-1.tsx",
      "type": "registry:component",
      "content": "import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/base-ui/tabs'\n\nconst tabs = [\n  {\n    name: 'Overview',\n    value: 'overview',\n    content: (\n      <>\n        Get a <span className='text-foreground font-semibold'>birds-eye view</span> of your creative project, from\n        milestones to current progress. Keep your vision clear and your team aligned with real-time updates.\n      </>\n    )\n  },\n  {\n    name: 'Roadmap',\n    value: 'roadmap',\n    content: (\n      <>\n        Plan your <span className='text-foreground font-semibold'>future trajectory</span> with a visual roadmap of\n        upcoming features and releases. Track your long-term goals and stay ahead of the curve.\n      </>\n    )\n  },\n  {\n    name: 'Backlog',\n    value: 'backlog',\n    content: (\n      <>\n        Manage your <span className='text-foreground font-semibold'>pending tasks</span> and ideas. Prioritize what\n        matters most and ensure nothing falls through the cracks as your project grows.\n      </>\n    )\n  }\n]\n\nconst Tabs1 = () => {\n  return (\n      <Tabs defaultValue='overview' className='gap-4'>\n        <TabsList className='bg-muted px-1 py-1.5 rounded-2xl'>\n          {tabs.map(tab => (\n            <TabsTrigger\n              key={tab.value}\n              value={tab.value}\n              className='rounded-xl px-4 py-3 text-sm font-medium transition-all data-[state=active]:bg-background data-[state=active]:text-primary dark:data-[state=active]:text-primary data-[state=active]:shadow-sm dark:data-[state=active]:bg-muted/80'\n            >\n              {tab.name}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n\n        {tabs.map(tab => (\n          <TabsContent key={tab.value} value={tab.value}>\n            <p className='text-muted-foreground leading-relaxed'>{tab.content}</p>\n          </TabsContent>\n        ))}\n      </Tabs>\n  )\n}\n\nexport default Tabs1\n"
    }
  ]
}