{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-16",
  "type": "registry:component",
  "title": "Tabs 16",
  "description": "Tabs 16. 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-16.tsx",
      "type": "registry:component",
      "content": "import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/base-ui/tabs'\n\nconst cloudServices = [\n  {\n    name: 'Compute',\n    value: 'compute',\n    title: 'Elastic Compute Power',\n    content:\n      'Dynamically scale your application workload with our high-performance compute instances. Optimized for memory-intensive operations and machine learning tasks.'\n  },\n  {\n    name: 'Storage',\n    value: 'storage',\n    title: 'Scalable Object Storage',\n    content:\n      'Store and retrieve any amount of data securely. Our distributed storage architecture ensures 99.999% availability and automatic geographic redundancy.'\n  },\n  {\n    name: 'Database',\n    value: 'database',\n    title: 'Managed Relational DB',\n    content:\n      'Deploy fully managed databases in seconds. We handle the heavy lifting of provisioning, patching, and backups so you can focus on building.'\n  }\n]\n\nconst Tabs16 = () => {\n  return (\n    <div className='w-full max-w-xl px-1'>\n      <Tabs defaultValue='compute' orientation='vertical' className='flex gap-3 sm:gap-8'>\n        <TabsList className='h-full flex-col bg-muted p-1 sm:p-2 rounded-2xl gap-2'>\n          {cloudServices.map(tab => (\n            <TabsTrigger key={tab.value} value={tab.value} className='justify-start px-1.5 sm:px-2 py-1 rounded-xl font-medium text-[11px] sm:text-sm'>\n              {tab.name}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n\n        <div className='flex-1'>\n          {cloudServices.map(tab => (\n            <TabsContent key={tab.value} value={tab.value} className='m-0 animate-in fade-in zoom-in-95 duration-500'>\n              <div className='rounded-2xl border border-indigo-100 bg-indigo-50/50 p-3.5 sm:p-6 shadow-sm dark:border-indigo-900/30 dark:bg-indigo-900/10'>\n                <h4 className='mb-3 text-sm sm:text-lg font-bold text-indigo-900 dark:text-indigo-400'>\n                  {tab.title}\n                </h4>\n                <p className='text-[12px] sm:text-sm text-indigo-950/70 dark:text-indigo-200/70'>\n                  {tab.content}\n                </p>\n                <button className='mt-5 rounded-lg bg-indigo-600 px-3 py-1.5 text-[10px] sm:px-4 sm:py-2 flex-shrink-0 font-semibold text-white shadow-md transition-colors hover:bg-indigo-700 dark:bg-indigo-500'>\n                  Deploy Service\n                </button>\n              </div>\n            </TabsContent>\n          ))}\n        </div>\n      </Tabs>\n    </div>\n  )\n}\n\nexport default Tabs16\n"
    }
  ]
}