{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-19",
  "type": "registry:component",
  "title": "Tabs 19",
  "description": "Tabs 19. 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-19.tsx",
      "type": "registry:component",
      "content": "import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/base-ui/tabs'\n\nconst travelOptions = [\n  {\n    name: 'Stays',\n    value: 'stays',\n    price: 'From $80/night',\n    content:\n      'Find the perfect place to rest. From cozy budget hostels to five-star luxury resorts, browse thousands of accommodations worldwide to match your travel style.'\n  },\n  {\n    name: 'Flights',\n    value: 'flights',\n    price: 'Deals Daily',\n    content:\n      'Take to the skies without breaking the bank. Compare prices across hundreds of airlines and book your next adventure with our seamless ticketing system.'\n  },\n  {\n    name: 'Experiences',\n    value: 'experiences',\n    price: 'Top Rated',\n    content:\n      'Immerse yourself in local culture. Book guided tours, adventurous excursions, and exclusive culinary events curated by local experts.'\n  }\n]\n\nconst Tabs19 = () => {\n  return (\n    <Tabs defaultValue='stays' orientation='vertical' className='w-full flex gap-3 sm:gap-8 min-h-[200px] px-1'>\n      <TabsList className='bg-transparent flex-col h-auto shrink-0 gap-2 rounded-none border-l-2 border-amber-200/50 p-0 pl-0 dark:border-amber-900/50'>\n        {travelOptions.map(tab => (\n          <TabsTrigger\n            key={tab.value}\n            value={tab.value}\n            className='data-[state=active]:border-amber-500 data-[state=active]:bg-amber-50 data-[state=active]:text-amber-700 dark:data-[state=active]:bg-amber-900/20 dark:data-[state=active]:text-amber-400 -ml-[2px] w-full justify-start rounded-none rounded-r-xl border border-transparent border-l-2 px-2 sm:px-3 py-1 font-bold transition-all data-[state=active]:shadow-none! text-[11px] sm:text-sm'\n          >\n            {tab.name}\n          </TabsTrigger>\n        ))}\n      </TabsList>\n\n      <div className='flex-1'>\n        {travelOptions.map(tab => (\n          <TabsContent key={tab.value} value={tab.value} className='m-0 animate-in fade-in slide-in-from-bottom-2 duration-700'>\n            <div className='relative flex flex-col gap-3 overflow-hidden rounded-3xl border border-amber-200/80 bg-amber-50/50 p-4 sm:p-6 dark:border-amber-900/50 dark:bg-amber-950/20'>\n              <div className='absolute -right-6 -top-6 h-28 w-28 rounded-full bg-amber-300/40 blur-3xl dark:bg-amber-700/30' />\n              <div className='flex items-baseline justify-between'>\n                <h4 className='text-xl sm:text-2xl font-semibold tracking-tight text-amber-950 dark:text-amber-50'>\n                  {tab.name}\n                </h4>\n              </div>\n              <p className='z-10 text-[13px] sm:text-sm leading-relaxed text-amber-900/80 dark:text-amber-100/70'>\n                {tab.content}\n              </p>\n              <div className='z-10 mt-2'>\n                <button className='rounded-full bg-amber-500 px-4 py-2 text-[10px] sm:px-6 sm:py-2.5 sm:text-xs font-bold text-white shadow-md transition-transform hover:-translate-y-0.5 active:translate-y-0 dark:bg-amber-600'>\n                  Explore {tab.name}\n                </button>\n              </div>\n            </div>\n          </TabsContent>\n        ))}\n      </div>\n    </Tabs>\n  )\n}\n\nexport default Tabs19\n"
    }
  ]
}