{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "imac",
  "type": "registry:ui",
  "files": [
    {
      "path": "registry/designali/ui/apple/imac.tsx",
      "content": "import * as React from \"react\";\n\ninterface ImacProps {\n  children: React.ReactNode;\n  className?: string;\n\n  /** iMac size */\n  size?: \"sm\" | \"md\" | \"lg\" | \"xl\";\n\n  /** Frame color */\n  color?: \"blue\" | \"green\" | \"pink\" | \"silver\" | \"yellow\" | \"orange\" | \"purple\";\n \n}\n\ntype ImacColor = ImacProps[\"color\"];\n\nconst imacImages: Record<NonNullable<ImacColor>, string> = {\n  blue: \"https://ik.imagekit.io/designali/images/apple/iMac/iMac%20M4%2024-inch%20Blue.png?updatedAt=1790829661198\",\n  green: \"https://ik.imagekit.io/designali/images/apple/iMac/iMac%20M4%2024-inch%20Green.png?updatedAt=1790829661139\",\n  pink: \"https://ik.imagekit.io/designali/images/apple/iMac/iMac%20M4%2024-inch%20Pink.png?updatedAt=1790829661453\",\n  silver: \"https://ik.imagekit.io/designali/images/apple/iMac/iMac%20M4%2024-inch%20Silver.png?updatedAt=1790829661377\",\n  yellow: \"https://ik.imagekit.io/designali/images/apple/iMac/iMac%20M4%2024-inch%20Yellow.png?updatedAt=1790829661269\",\n  orange: \"https://ik.imagekit.io/designali/images/apple/iMac/iMac%20M4%2024-inch%20Orange.png?updatedAt=1790829661145\",\n  purple: \"https://ik.imagekit.io/designali/images/apple/iMac/iMac%20M4%2024-inch%20Purple.png?updatedAt=1790829661478\",\n};\n\nconst sizeClasses = {\n  sm: \"w-[24rem]\",\n  md: \"w-[32rem]\",\n  lg: \"w-[40rem]\",\n  xl: \"w-[52rem]\",\n};\n \n\nexport function IMac({\n  children,\n  className = \"\",\n  size = \"md\",\n  color = \"silver\", \n}: ImacProps) {\n  const frameImage = imacImages[color] ?? imacImages.silver;\n\n  return (\n    <div\n      className={`\n        relative inline-block\n        ${sizeClasses[size]}\n        aspect-[16/11]\n        ${className}\n      `}\n    >\n      <img\n        src={frameImage}\n        alt={\"iMac\"}\n        className=\"pointer-events-none absolute inset-0 z-10 h-full w-full select-none object-contain\"\n      />\n \n      <div\n        className={`\n          absolute left-[12%] right-[12%] top-[3.8%] bottom-[32%] overflow-hidden bg-background\n          ${[size]}\n        `}\n      >\n        <div className=\"h-full w-full overflow-y-auto\">\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}",
      "type": "registry:ui"
    }
  ]
}