4d:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 4e:Td25,"use client" import { useState } from "react" import { IPad } from "@/registry/designali/ui/apple/ipad" type IPadVariant = "ipad-air" | "ipad-pro" type IPadColor = | "blue" | "purple" | "space-grey" | "starlight" | "black" | "silver" const colorOptions: Record< IPadVariant, { value: IPadColor; label: string }[] > = { "ipad-air": [ { value: "blue", label: "Blue" }, { value: "purple", label: "Purple" }, { value: "space-grey", label: "Space Grey" }, { value: "starlight", label: "Starlight" }, ], "ipad-pro": [ { value: "black", label: "Space Black" }, { value: "silver", label: "Silver" }, ], } export function IPadVariantDemo() { const [variant, setVariant] = useState("ipad-air") const [color, setColor] = useState("blue") const handleVariantChange = ( newVariant: IPadVariant ) => { setVariant(newVariant) // Reset color when switching model setColor( newVariant === "ipad-air" ? "blue" : "black" ) } return (

{/* Model Tabs */}

{( [ { value: "ipad-air", label: "iPad Air", }, { value: "ipad-pro", label: "iPad Pro", }, ] as { value: IPadVariant label: string }[] ).map((option) => ( ))}

{/* Color Options */}

{colorOptions[variant].map((option) => ( ))}

{/* iPad Preview */}