{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tabs-4",
  "type": "registry:component",
  "title": "Tabs 4",
  "description": "Tabs 4. A set of layered sections of content—known as tab panels—that are displayed one at a time.",
  "dependencies": [],
  "registryDependencies": [
    "badge",
    "tabs"
  ],
  "files": [
    {
      "path": "components/watermelon/tabs-4.tsx",
      "type": "registry:component",
      "content": "import { Badge } from '@/components/base-ui/badge';\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from '@/components/base-ui/tabs';\n\nconst stock = [\n  {\n    name: 'Inventory',\n    value: 'inventory',\n    count: 1,\n    content: (\n      <>\n        Keep track of your{' '}\n        <span className=\"text-foreground font-semibold\">\n          current stock levels\n        </span>\n        . Manage SKU counts, reorder alerts, and warehouse locations to keep\n        your fulfillment center running at peak efficiency.\n      </>\n    ),\n  },\n  {\n    name: 'Pending',\n    value: 'pending',\n    count: 4,\n    content: (\n      <>\n        Monitor incoming{' '}\n        <span className=\"text-foreground font-semibold\">customer orders</span>.\n        Review payment statuses, verify addresses, and prepare your pick-lists\n        for next-day dispatch.\n      </>\n    ),\n  },\n  {\n    name: 'Shipped',\n    value: 'shipped',\n    count: 6,\n    content: (\n      <>\n        Access your{' '}\n        <span className=\"text-foreground font-semibold\">delivery history</span>.\n        Track parcels, manage returns, and analyze shipping performance across\n        all your carrier partners.\n      </>\n    ),\n  },\n];\n\nconst Tabs4 = () => {\n  return (\n    <Tabs defaultValue=\"inventory\" className=\"w-full gap-4 px-1\">\n      <div className=\"bg-muted/50 rounded-full p-1 w-fit max-w-full\">\n        <div className=\"overflow-x-auto overflow-y-hidden scrollbar-hide sm:py-0\">\n          <TabsList className=\"bg-transparent shadow-none border-none flex w-max justify-start gap-1 p-0.5 \">\n            {stock.map((tab) => (\n              <TabsTrigger\n                key={tab.value}\n                value={tab.value}\n                className=\"h-full rounded-xl px-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                <Badge className=\"bg-primary text-primary-foreground flex size-5 items-center justify-center rounded-md p-0 text-[10px] tabular-nums rounded-md ml-1\">\n                  {tab.count}\n                </Badge>\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </div>\n      </div>\n\n      {stock.map((tab) => (\n        <TabsContent key={tab.value} value={tab.value}>\n          <p className=\"text-muted-foreground text-[13px] leading-relaxed\">\n            {tab.content}\n          </p>\n        </TabsContent>\n      ))}\n    </Tabs>\n  );\n};\n\nexport default Tabs4;\n"
    }
  ]
}