{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-15",
  "type": "registry:component",
  "title": "Tabs 15",
  "description": "Tabs 15. 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-15.tsx",
      "type": "registry:component",
      "content": "import { IconBuildingFactory, IconBuildingSkyscraper, IconHome2 } from '@tabler/icons-react'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/base-ui/tabs'\n\nconst properties = [\n  {\n    name: 'Residential',\n    value: 'residential',\n    icon: IconHome2,\n    content: (\n      <>\n        Explore luxury <span className='text-foreground font-semibold'>family homes</span>. Browse single-family houses,\n        modern apartments, and quiet suburban estates designed for comfortable living and long-term value.\n      </>\n    )\n  },\n  {\n    name: 'Commercial',\n    value: 'commercial',\n    icon: IconBuildingSkyscraper,\n    content: (\n      <>\n        Expand your <span className='text-foreground font-semibold'>business footprint</span>. Discover premium office\n        spaces, high-traffic retail locations, and versatile mixed-use properties in the heart of the city.\n      </>\n    )\n  },\n  {\n    name: 'Industrial',\n    value: 'industrial',\n    icon: IconBuildingFactory,\n    content: (\n      <>\n        Optimize your <span className='text-foreground font-semibold'>logistics network</span>. Find spacious\n        warehouses, advanced manufacturing facilities, and strategically located distribution centers.\n      </>\n    )\n  }\n]\n\nconst Tabs15 = () => {\n  return (\n    <Tabs defaultValue='residential' orientation='vertical' className='flex flex-row w-full max-w-2xl gap-3 sm:gap-8 px-1'>\n      <TabsList className='flex flex-col h-auto bg-transparent gap-2 p-0 shrink-0 border-l-2 border-muted/50 rounded-none w-max'>\n        {properties.map(({ icon: Icon, name, value }) => (\n          <TabsTrigger\n            key={value}\n            value={value}\n            className='group relative flex w-full items-center justify-start gap-1.5 sm:gap-3 rounded-none rounded-r-xl border border-transparent px-1.5 sm:px-3 py-2 sm:py-1 text-[10px] sm:text-sm font-semibold transition-all hover:bg-muted/30 data-[state=active]:bg-primary/5 data-[state=active]:text-primary data-[state=active]:shadow-none! -ml-[2px]'\n          >\n            <div className='absolute left-0 top-0 bottom-0 w-[2px] bg-primary scale-y-0 opacity-0 transition-all duration-300 group-data-[state=active]:scale-y-100 group-data-[state=active]:opacity-100' />\n            <Icon size={16} className='sm:size-[18px]' />\n            {name}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n      <div className='flex-1 py-1'>\n        {properties.map(tab => (\n          <TabsContent\n            key={tab.value}\n            value={tab.value}\n            className='m-0 animate-in fade-in slide-in-from-bottom-2 duration-500'\n          >\n            <div className='flex items-start sm:items-center gap-1.5 sm:gap-3 mb-4 sm:mb-5'>\n              <div className='p-1.5 sm:p-2 rounded-xl bg-primary text-primary-foreground shadow-sm'>\n                <tab.icon size={12} className='sm:size-[15px]' stroke={2} />\n              </div>\n              <h4 className='text-sm sm:text-base tracking-tight'>{tab.name} Real Estate</h4>\n            </div>\n            <p className='text-muted-foreground leading-relaxed text-[13px] sm:text-sm'>\n              {tab.content}\n            </p>\n          </TabsContent>\n        ))}\n      </div>\n    </Tabs>\n  )\n}\n\nexport default Tabs15\n"
    }
  ]
}