{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "studio-display-02",
  "type": "registry:component",
  "title": "Apple Studio Display",
  "files": [
    {
      "path": "registry/designali/components/apple/studio-display/studio-display-02.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { StudioDisplay } from \"@/registry/designali/ui/apple/studio-display\"\n\ntype IMacSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nexport function IMacDashboardDemo() {\n  const [size, setSize] = useState<IMacSize>(\"md\")\n\n  const options: { value: IMacSize; label: string }[] = [\n    { value: \"sm\", label: \"Small\" },\n    { value: \"md\", label: \"Medium\" },\n    { value: \"lg\", label: \"Large\" },\n    { value: \"xl\", label: \"Extra Large\" },\n  ]\n\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-12 p-8\">\n      {/* Tabs / Radio Toggle */}\n      <div className=\"flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800\">\n        {options.map((option) => (\n          <button\n            key={option.value}\n            onClick={() => setSize(option.value)}\n            className={`rounded-md px-4 py-2 text-sm font-medium transition-all duration-200 ${\n              size === option.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            {option.label}\n          </button>\n        ))}\n      </div>\n\n      {/* Active IMac Display */}\n      <div className=\"flex flex-col items-center\">\n        <StudioDisplay size={size}>\n          <div className=\"flex h-full items-center justify-center\">\n            <span className=\"text-2xl font-semibold\">\n              {options.find((opt) => opt.value === size)?.label}\n            </span>\n          </div>\n        </StudioDisplay>\n      </div>\n    </div>\n  )\n}",
      "type": "registry:component"
    }
  ]
}