{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"iphone-mockup","type":"registry:file","title":"Iphone Mockup","files":[{"path":"iphone-mockup.tsx","type":"registry:file","content":"/**\n * iPhone 17 Mockup Component\n * Acquired from https://www.figma.com/community/file/1560672326379407095/iphone-17-mockups\n * Original design by Max Rudberg (https://maxrudberg.com)\n *\n * This implementation is rebuilt in React with Tailwind CSS for dark mode support.\n *\n * License & Usage:\n * - Licensed under CC BY 4.0\n * - This React implementation is provided as-is for educational and commercial use\n * - Maintains all visual fidelity from the original Figma design\n *\n * Features:\n * - Full dark mode support with Tailwind CSS\n * - Optional children prop for screen content\n * - Responsive and scalable SVG\n * - Modern iPhone design with Dynamic Island\n * - Accurate camera placement on the right side\n *\n * @author Diar Muradi <https://diarmuradi.com>\n * @version 1.1.0\n * @date January 2026\n **/\n\nexport const IPhoneMockup = ({\n  className = \"\",\n  children,\n}: {\n  className?: string\n  children?: React.ReactNode\n}) => {\n  return (\n    <svg\n      width=\"400\"\n      height=\"820\"\n      viewBox=\"0 0 400 820\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      className={className}\n    >\n      {/* Device body */}\n      <rect\n        x=\"10\"\n        y=\"10\"\n        width=\"380\"\n        height=\"800\"\n        rx=\"55\"\n        className=\"fill-[#1d1d1f] dark:fill-[#1d1d1f]\"\n      />\n\n      {/* Inner bezel */}\n      <rect\n        x=\"15\"\n        y=\"15\"\n        width=\"370\"\n        height=\"790\"\n        rx=\"50\"\n        className=\"fill-[#2c2c2e] dark:fill-[#2c2c2e]\"\n      />\n\n      {/* Screen */}\n      <g clipPath=\"url(#clip0_iphone_screen)\">\n        <rect\n          x=\"20\"\n          y=\"20\"\n          width=\"360\"\n          height=\"780\"\n          rx=\"45\"\n          className=\"fill-white dark:fill-black\"\n        />\n\n        {/* Screen content area */}\n        <g clipPath=\"url(#clip1_iphone_content)\">\n          <rect\n            x=\"20\"\n            y=\"20\"\n            width=\"360\"\n            height=\"780\"\n            className=\"fill-[#f5f5f7] dark:fill-[#000000]\"\n          />\n          {children}\n        </g>\n      </g>\n\n      {/* Dynamic Island */}\n      <rect\n        x=\"130\"\n        y=\"30\"\n        width=\"140\"\n        height=\"37\"\n        rx=\"18.5\"\n        className=\"fill-black\"\n      />\n\n      {/* Camera lens - moved to right side */}\n      <circle\n        cx=\"240\"\n        cy=\"48.5\"\n        r=\"6\"\n        className=\"fill-[#0a0a0a] dark:fill-[#0a0a0a]\"\n      />\n\n      {/* Front camera ring */}\n      <circle\n        cx=\"240\"\n        cy=\"48.5\"\n        r=\"7.5\"\n        className=\"fill-none stroke-[#2c2c2e] dark:stroke-[#2c2c2e]\"\n        strokeWidth=\"1\"\n      />\n\n      {/* Side buttons */}\n      {/* Power button */}\n      <rect\n        x=\"390\"\n        y=\"200\"\n        width=\"5\"\n        height=\"80\"\n        rx=\"2.5\"\n        className=\"fill-[#1d1d1f] dark:fill-[#1d1d1f]\"\n      />\n\n      {/* Volume up */}\n      <rect\n        x=\"5\"\n        y=\"180\"\n        width=\"5\"\n        height=\"60\"\n        rx=\"2.5\"\n        className=\"fill-[#1d1d1f] dark:fill-[#1d1d1f]\"\n      />\n\n      {/* Volume down */}\n      <rect\n        x=\"5\"\n        y=\"260\"\n        width=\"5\"\n        height=\"60\"\n        rx=\"2.5\"\n        className=\"fill-[#1d1d1f] dark:fill-[#1d1d1f]\"\n      />\n\n      {/* Mute switch */}\n      <rect\n        x=\"5\"\n        y=\"140\"\n        width=\"5\"\n        height=\"30\"\n        rx=\"2.5\"\n        className=\"fill-[#1d1d1f] dark:fill-[#1d1d1f]\"\n      />\n\n      {/* Screen shine effect */}\n      <rect\n        x=\"20\"\n        y=\"20\"\n        width=\"360\"\n        height=\"780\"\n        rx=\"45\"\n        className=\"fill-white dark:fill-white\"\n        opacity=\"0.03\"\n      />\n\n      {/* Subtle edge highlight */}\n      <rect\n        x=\"15\"\n        y=\"15\"\n        width=\"370\"\n        height=\"790\"\n        rx=\"50\"\n        className=\"stroke-white dark:stroke-white\"\n        strokeWidth=\"0.5\"\n        fill=\"none\"\n        opacity=\"0.1\"\n      />\n\n      <defs>\n        <clipPath id=\"clip0_iphone_screen\">\n          <rect x=\"20\" y=\"20\" width=\"360\" height=\"780\" rx=\"45\" />\n        </clipPath>\n        <clipPath id=\"clip1_iphone_content\">\n          <rect x=\"20\" y=\"20\" width=\"360\" height=\"780\" rx=\"45\" />\n        </clipPath>\n      </defs>\n    </svg>\n  )\n}","target":"components/iphone-mockup.tsx"}]}