{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "iphone-02",
  "type": "registry:component",
  "title": "Apple iPhone",
  "files": [
    {
      "path": "registry/designali/components/apple/iphone/iphone-02.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { IPhone } from \"@/registry/designali/ui/apple/iphone\"\n\ntype IPhoneVariant = \"18-pro\" | \"18-pro-max\"\n\ntype IPhoneColor =\n  | \"black\"\n  | \"glacier\"\n  | \"silver\"\n  | \"burgundy\"\n\nconst colorOptions: Record<\n  IPhoneVariant,\n  { value: IPhoneColor; label: string }[]\n> = {\n  \"18-pro\": [\n    { value: \"black\", label: \"Black\" },\n    { value: \"glacier\", label: \"Glacier\" },\n    { value: \"silver\", label: \"Silver\" },\n    { value: \"burgundy\", label: \"Burgundy\" },\n  ],\n\n  \"18-pro-max\": [\n    { value: \"black\", label: \"Black\" },\n    { value: \"glacier\", label: \"Glacier\" },\n    { value: \"silver\", label: \"Silver\" },\n    { value: \"burgundy\", label: \"Burgundy\" },\n  ],\n}\n\nexport function IPhoneVariantDemo() {\n  const [variant, setVariant] =\n    useState<IPhoneVariant>(\"18-pro\")\n\n  const [color, setColor] =\n    useState<IPhoneColor>(\"silver\")\n\n  const handleVariantChange = (\n    newVariant: IPhoneVariant\n  ) => {\n    setVariant(newVariant)\n  }\n\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-10 p-8\">\n\n      {/* Model Tabs */}\n      <div className=\"flex items-center gap-1 rounded-lg bg-gray-100 p-1 dark:bg-zinc-800\">\n        <button\n          onClick={() => handleVariantChange(\"18-pro\")}\n          className={`rounded-md px-5 py-2 text-sm font-medium transition-all ${\n            variant === \"18-pro\"\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          iPhone 18 Pro\n        </button>\n\n        <button\n          onClick={() => handleVariantChange(\"18-pro-max\")}\n          className={`rounded-md px-5 py-2 text-sm font-medium transition-all ${\n            variant === \"18-pro-max\"\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          iPhone 18 Pro Max\n        </button>\n      </div>\n\n      {/* Color Options */}\n      <div className=\"flex flex-wrap items-center justify-center gap-2\">\n        {colorOptions[variant].map((option) => (\n          <button\n            key={option.value}\n            onClick={() => setColor(option.value)}\n            className={`rounded-full border px-4 py-2 text-xs font-medium transition-all ${\n              color === option.value\n                ? \"border-foreground bg-foreground text-background\"\n                : \"border-border bg-background text-muted-foreground hover:text-foreground\"\n            }`}\n          >\n            {option.label}\n          </button>\n        ))}\n      </div>\n\n      {/* iPhone */}\n      <IPhone\n        variant={variant}\n        color={color} \n      >\n        <video\n          src=\"/vid/colorful-spheres.mp4\"\n          autoPlay\n          loop\n          muted\n          playsInline\n          className=\"h-full w-full object-cover\"\n        />\n      </IPhone>\n    </div>\n  )\n}",
      "type": "registry:component"
    }
  ]
}