{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-17",
  "type": "registry:component",
  "title": "Tabs 17",
  "description": "Tabs 17. 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-17.tsx",
      "type": "registry:component",
      "content": "import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/base-ui/tabs'\n\nconst healthServices = [\n  {\n    name: 'Telehealth',\n    value: 'telehealth',\n    doctor: 'Dr. Sarah Connor',\n    specialty: 'General Practice',\n    content:\n      'Connect with board-certified physicians from the comfort of your home. Consultations, prescriptions, and follow-ups available 24/7 via secure video calls.',\n    status: 'Available Now'\n  },\n  {\n    name: 'Therapy',\n    value: 'therapy',\n    doctor: 'Dr. James Wilson',\n    specialty: 'Clinical Psychology',\n    content:\n      'Access confidential mental health support. Schedule weekly therapy sessions with our licensed counselors and psychiatrists to manage stress and anxiety.',\n    status: 'By Appointment'\n  },\n  {\n    name: 'Nutrition',\n    value: 'nutrition',\n    doctor: 'Dr. Emily Chen',\n    specialty: 'Dietetics',\n    content:\n      'Get personalized meal plans and dietary advice. Work with our nutrition experts to achieve your fitness goals and manage dietary restrictions safely.',\n    status: 'Waitlist'\n  }\n]\n\nconst Tabs17 = () => {\n  return (\n    <div className='w-full max-w-xl px-1'>\n      <Tabs defaultValue='telehealth' orientation='vertical' className='flex gap-3 sm:gap-6'>\n        <TabsList className='bg-background h-full flex-col shrink-0 gap-1'>\n          {healthServices.map(tab => (\n            <TabsTrigger\n              key={tab.value}\n              value={tab.value}\n              className='data-[state=active]:bg-emerald-100/50 data-[state=active]:text-emerald-700 dark:data-[state=active]:text-emerald-400 dark:data-[state=active]:bg-emerald-900/20 w-full justify-start data-[state=active]:shadow-none! dark:data-[state=active]:border-transparent rounded-lg px-2 sm:px-4 text-[11px] sm:text-sm'\n            >\n              {tab.name}\n            </TabsTrigger>\n          ))}\n        </TabsList>\n\n        <div className='flex-1'>\n          {healthServices.map(tab => (\n            <TabsContent key={tab.value} value={tab.value} className='m-0 animate-in slide-in-from-bottom-2 fade-in duration-500'>\n              <div className='rounded-3xl border border-emerald-100 bg-emerald-50/50 p-4 sm:p-6 dark:border-emerald-900/30 dark:bg-emerald-900/10'>\n                <div className='mb-4 flex flex-col gap-1 sm:gap-2 sm:flex-row sm:items-center sm:justify-between'>\n                  <div>\n                    <h4 className='text-sm sm:text-lg font-semibold tracking-tight text-emerald-950 dark:text-emerald-50'>\n                      {tab.doctor}\n                    </h4>\n                    <span className='text-[11px] sm:text-sm font-medium text-emerald-600 dark:text-emerald-400'>\n                      {tab.specialty}\n                    </span>\n                  </div>\n                </div>\n                <p className='text-[13px] sm:text-sm text-emerald-900/70 dark:text-emerald-100/60'>\n                  {tab.content}\n                </p>\n                <div className='mt-4 flex items-center gap-1.5 sm:gap-3 border-t border-emerald-200/30 pt-4 dark:border-emerald-800/30'>\n                  <button className='rounded-lg bg-emerald-600 px-2.5 py-1.5 text-[10px] sm:px-4 sm:py-2 sm:text-xs font-semibold text-white shadow-sm transition-colors hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600'>\n                    Book Session\n                  </button>\n                  <button className='rounded-lg px-2.5 py-1.5 text-[10px] sm:px-4 sm:py-2 sm:text-xs font-semibold text-emerald-700 transition-colors hover:bg-emerald-100 dark:text-emerald-400 dark:hover:bg-emerald-800/40'>\n                    View Profile\n                  </button>\n                </div>\n              </div>\n            </TabsContent>\n          ))}\n        </div>\n      </Tabs>\n    </div>\n  )\n}\n\nexport default Tabs17\n"
    }
  ]
}