{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "macbook-03",
  "type": "registry:component",
  "title": "Apple MacBook",
  "files": [
    {
      "path": "registry/designali/components/apple/macbook/macbook-03.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Macbook } from \"@/registry/designali/ui/apple/macbook\"\n\nconst variants = [\n  {\n    value: \"macbook-air\",\n    label: \"MacBook Air\",\n    colors: [\"sky-blue\", \"midnight\", \"starlight\", \"silver\"],\n  },\n  {\n    value: \"macbook-pro\",\n    label: \"MacBook Pro\",\n    colors: [\"black\", \"silver\"],\n  },\n  {\n    value: \"macbook-neo\",\n    label: \"MacBook Neo\",\n    colors: [\"silver\", \"indigo\", \"blush\", \"citrus\"],\n  },\n] as const\n\ntype MacbookVariant = (typeof variants)[number][\"value\"]\ntype MacbookColor = (typeof variants)[number][\"colors\"][number]\n\nexport function MacbookVariantDemo() {\n  const [activeVariant, setActiveVariant] =\n    useState<MacbookVariant>(\"macbook-neo\")\n\n  const [activeColor, setActiveColor] =\n    useState<MacbookColor>(\"citrus\")\n\n  const currentVariant = variants.find(\n    (variant) => variant.value === activeVariant\n  )!\n\n  const handleVariantChange = (variant: MacbookVariant) => {\n    setActiveVariant(variant)\n\n    const selectedVariant = variants.find(\n      (item) => item.value === variant\n    )!\n\n    setActiveColor(selectedVariant.colors[0])\n  }\n\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-8 p-8\">\n      {/* Model Tabs */}\n      <div className=\"flex flex-wrap items-center justify-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800\">\n        {variants.map((variant) => (\n          <button\n            key={variant.value}\n            onClick={() => handleVariantChange(variant.value)}\n            className={`rounded-md px-4 py-2 text-sm font-medium transition-all duration-200 ${\n              activeVariant === variant.value\n                ? \"bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white\"\n                : \"text-gray-500 hover:text-gray-900 dark:text-zinc-400 dark:hover:text-zinc-100\"\n            }`}\n          >\n            {variant.label}\n          </button>\n        ))}\n      </div>\n\n      {/* Color Tabs */}\n      <div className=\"flex flex-wrap items-center justify-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800\">\n        {currentVariant.colors.map((color) => (\n          <button\n            key={color}\n            onClick={() => setActiveColor(color)}\n            className={`rounded-md px-4 py-2 text-sm font-medium capitalize transition-all duration-200 ${\n              activeColor === color\n                ? \"bg-white text-black shadow-sm dark:bg-zinc-950 dark:text-white\"\n                : \"text-gray-500 hover:text-gray-900 dark:text-zinc-400 dark:hover:text-zinc-100\"\n            }`}\n          >\n            {color.replace(\"-\", \" \")}\n          </button>\n        ))}\n      </div>\n\n      {/* Active MacBook */}\n      <div className=\"flex flex-col items-center\">\n        <Macbook\n          size=\"lg\"\n          variant={activeVariant}\n          color={activeColor}\n        >\n          <div className=\"flex h-full items-center justify-center bg-background\">\n            <p className=\"text-2xl font-medium capitalize\">\n              {currentVariant.label} — {activeColor.replace(\"-\", \" \")}\n            </p>\n          </div>\n        </Macbook>\n      </div>\n    </div>\n  )\n}",
      "type": "registry:component"
    }
  ]
}