{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "iphone",
  "type": "registry:ui",
  "title": "Iphone",
  "description": "IPhone mockup with screen, header, and custom children content.",
  "author": "Ahdeetai <https://aditya.is-cool.dev>",
  "registryDependencies": [],
  "dependencies": ["lucide-react"],
  "files": [
    {
      "type": "registry:ui",
      "path": "components/ui/iphone.tsx",
      "content": "import type { HTMLAttributes } from 'react';\nimport { Wifi, Battery, Signal } from 'lucide-react';\n\nexport interface IphoneProps extends HTMLAttributes<HTMLDivElement> {\n  imgUrl?: string;\n  clip?: string;\n  showHeader?: boolean;\n  headerClassName?: string;\n}\n\nexport function Iphone({\n  imgUrl,\n  clip,\n  showHeader,\n  className,\n  style,\n  children,\n  ...props\n}: IphoneProps) {\n  const calcX = (21.25 / 433) * 100;\n  const calcY = (19.25 / 882) * 100;\n  const calcW = (389.5 / 433) * 100;\n  const calcH = (843.5 / 882) * 100;\n  const rX = (55.75 / 389.5) * 100;\n  const rY = (55.75 / 843.5) * 100;\n\n  const notchHeight = ((67 - 19.25) / 843.5) * 100;\n\n  const currentTime = new Date().toLocaleTimeString('en-US', {\n    hour: '2-digit',\n    minute: '2-digit',\n    hour12: false,\n  });\n\n  return (\n    <div\n      className={`relative inline-block w-full align-middle leading-none ${className}`}\n      style={{ aspectRatio: `433/882`, ...style }}\n      {...props}\n    >\n      {clip && (\n        <div\n          className='pointer-events-none absolute z-0 overflow-hidden bg-white dark:bg-black'\n          style={{\n            left: `${calcX}%`,\n            top: `${calcY}%`,\n            width: `${calcW}%`,\n            height: `${calcH}%`,\n            borderRadius: `${rX}% / ${rY}%`,\n          }}\n        >\n          <video\n            className='block size-full object-cover'\n            src={clip}\n            autoPlay\n            loop\n            muted\n            playsInline\n            preload='metadata'\n          />\n        </div>\n      )}\n\n      {!clip && imgUrl && (\n        <div\n          className='pointer-events-none absolute z-0 overflow-hidden bg-white dark:bg-black'\n          style={{\n            left: `${calcX}%`,\n            top: `${calcY}%`,\n            width: `${calcW}%`,\n            height: `${calcH}%`,\n            borderRadius: `${rX}% / ${rY}%`,\n          }}\n        >\n          <img\n            src={imgUrl || '/placeholder.svg'}\n            alt=''\n            className='block size-full object-cover object-top'\n          />\n        </div>\n      )}\n\n      {!clip && !imgUrl && (\n        <div\n          className='pointer-events-none absolute z-0 overflow-hidden bg-white dark:bg-black'\n          style={{\n            left: `${calcX}%`,\n            top: `${calcY}%`,\n            width: `${calcW}%`,\n            height: `${calcH}%`,\n            borderRadius: `${rX}% / ${rY}%`,\n          }}\n        />\n      )}\n\n      {children && (\n        <div\n          className='absolute z-10 overflow-hidden'\n          style={{\n            left: `${calcX}%`,\n            top: `${calcY}%`,\n            width: `${calcW}%`,\n            height: `${calcH}%`,\n            borderRadius: `${rX}% / ${rY}%`,\n          }}\n        >\n          <div className='size-full' style={{ paddingTop: `${notchHeight}%` }}>\n            {children}\n          </div>\n        </div>\n      )}\n\n      {showHeader && (\n        <div\n          className='absolute z-15 flex items-center justify-between pointer-events-none text-[10px] sm:text-[11px] font-semibold px-3.5 sm:px-5.5'\n          style={{\n            left: `${calcX}%`,\n            top: `${calcY}%`,\n            width: `${calcW}%`,\n            height: `${notchHeight}%`,\n          }}\n        >\n          <div className='text-black dark:text-white shrink-0'>\n            {currentTime}\n          </div>\n          <div className='flex items-center justify-end gap-0.75 sm:gap-1.25 min-w-15 sm:min-w-17.5'>\n            <Signal\n              className='text-black dark:text-white w-2.75 h-2.75 sm:w-3.75 sm:h-3.75'\n              strokeWidth={2.5}\n            />\n            <Wifi\n              className='text-black dark:text-white w-3 h-3 sm:w-4 sm:h-4'\n              strokeWidth={2.5}\n            />\n            <Battery\n              className='text-black fill-black dark:fill-white dark:text-white w-4.5 h-4.5 sm:w-5.5 sm:h-5.5'\n              strokeWidth={2.5}\n            />\n          </div>\n        </div>\n      )}\n\n      <svg\n        viewBox='0 0 433 882'\n        fill='none'\n        xmlns='http://www.w3.org/2000/svg'\n        className='absolute inset-0 size-full pointer-events-none'\n        style={{ transform: 'translateZ(0)', zIndex: 20 }}\n      >\n        <g mask='url(#hole)'>\n          <path\n            d='M2 73C2 32.6832 34.6832 0 75 0H357C397.317 0 430 32.6832 430 73V809C430 849.317 397.317 882 357 882H75C34.6832 882 2 849.317 2 809V73Z'\n            fill='url(#metalGrad1)'\n          />\n          <path\n            d='M0 171C0 170.448 0.447715 170 1 170H3V204H1C0.447715 204 0 203.552 0 203V171Z'\n            fill='url(#metalGrad2)'\n          />\n          <path\n            d='M1 234C1 233.448 1.44772 233 2 233H3.5V300H2C1.44772 300 1 299.552 1 299V234Z'\n            fill='url(#metalGrad2)'\n          />\n          <path\n            d='M1 319C1 318.448 1.44772 318 2 318H3.5V385H2C1.44772 385 1 384.552 1 384V319Z'\n            fill='url(#metalGrad2)'\n          />\n          <path\n            d='M430 279H432C432.552 279 433 279.448 433 280V384C433 384.552 432.552 385 430 385H430V279Z'\n            fill='url(#metalGrad2)'\n          />\n          <path\n            d='M6 74C6 35.3401 37.3401 4 76 4H356C394.66 4 426 35.3401 426 74V808C426 846.66 394.66 878 356 878H76C37.3401 878 6 846.66 6 808V74Z'\n            fill='#1a1a1a'\n          />\n        </g>\n\n        <path\n          opacity='0.5'\n          d='M174 5H258V5.5C258 6.60457 257.105 7.5 256 7.5H176C174.895 7.5 174 6.60457 174 5.5V5Z'\n          fill='#888888'\n        />\n\n        <path\n          d='M21.25 75C21.25 44.2101 46.2101 19.25 77 19.25H355C385.79 19.25 410.75 44.2101 410.75 75V807C410.75 837.79 385.79 862.75 355 862.75H77C46.2101 862.75 21.25 837.79 21.25 807V75Z'\n          fill='url(#metalGrad3)'\n          stroke='url(#metalGrad3)'\n          strokeWidth='0.5'\n          mask='url(#hole)'\n        />\n\n        <path\n          d='M154 48.5C154 38.2827 162.283 30 172.5 30H259.5C269.717 30 278 38.2827 278 48.5C278 58.7173 269.717 67 259.5 67H172.5C162.283 67 154 58.7173 154 48.5Z'\n          fill='#1a1a1a'\n        />\n        <path\n          d='M249 48.5C249 42.701 253.701 38 259.5 38C265.299 38 270 42.701 270 48.5C270 54.299 265.299 59 259.5 59C253.701 59 249 54.299 249 48.5Z'\n          fill='#1a1a1a'\n        />\n        <path\n          d='M254 48.5C254 45.4624 256.462 43 259.5 43C262.538 43 265 45.4624 265 48.5C265 51.5376 262.538 54 259.5 54C256.462 54 254 51.5376 254 48.5Z'\n          fill='url(#lensGrad)'\n        />\n\n        <defs>\n          <linearGradient\n            id='metalGrad1'\n            x1='216'\n            y1='0'\n            x2='216'\n            y2='882'\n            gradientUnits='userSpaceOnUse'\n          >\n            <stop stopColor='#e8e8e8' />\n            <stop offset='0.5' stopColor='#c4c4c4' />\n            <stop offset='1' stopColor='#a8a8a8' />\n          </linearGradient>\n          <linearGradient\n            id='metalGrad2'\n            x1='2'\n            y1='170'\n            x2='2'\n            y2='385'\n            gradientUnits='userSpaceOnUse'\n          >\n            <stop stopColor='#d4d4d4' />\n            <stop offset='1' stopColor='#9a9a9a' />\n          </linearGradient>\n          <linearGradient\n            id='metalGrad3'\n            x1='216'\n            y1='19'\n            x2='216'\n            y2='863'\n            gradientUnits='userSpaceOnUse'\n          >\n            <stop stopColor='#d8d8d8' />\n            <stop offset='0.5' stopColor='#b0b0b0' />\n            <stop offset='1' stopColor='#949494' />\n          </linearGradient>\n          <radialGradient\n            id='lensGrad'\n            cx='259.5'\n            cy='48.5'\n            r='5.5'\n            gradientUnits='userSpaceOnUse'\n          >\n            <stop stopColor='#4d6b9a' />\n            <stop offset='0.4' stopColor='#2a4573' />\n            <stop offset='0.7' stopColor='#1a2d4d' />\n            <stop offset='1' stopColor='#0a1428' />\n          </radialGradient>\n          <mask id='hole' maskUnits='userSpaceOnUse'>\n            <rect x='0' y='0' width='433' height='882' fill='white' />\n            <rect\n              x='21.25'\n              y='19.25'\n              width='389.5'\n              height='843.5'\n              rx='55.75'\n              ry='55.75'\n              fill='black'\n            />\n          </mask>\n        </defs>\n      </svg>\n    </div>\n  );\n}\n"
    }
  ]
}