feat(iphone-15-pro): add webviewSrc media option and fix aspect ratio

apps/www/content/docs/components/iphone-15-pro.mdx

@@ -62,11 +62,12 @@ import { Iphone15Pro } from "@/components/magicui/iphone-15-pro";
 
 ## Props
 
-| Prop       | Type     | Default | Description                            |
-| ---------- | -------- | ------- | -------------------------------------- |
-| `width`    | `number` | `433`   | The width of the iPhone 15 Pro window  |
-| `height`   | `number` | `882`   | The height of the iPhone 15 Pro window |
-| `src`      | `string` | `-`     | The source of the image to display     |
-| `videoSrc` | `string` | `-`     | The source of the video to display     |
+| Prop         | Type     | Default | Description                                   |
+| ------------ | -------- | ------- | --------------------------------------------- |
+| `width`      | `number` | `433`   | The width of the iPhone 15 Pro window         |
+| `height`     | `number` | `882`   | The height of the iPhone 15 Pro window        |
+| `imageSrc`   | `string` | `-`     | The source of the image to display            |
+| `videoSrc`   | `string` | `-`     | The source of the video to display            |
+| `webviewSrc` | `string` | `-`     | The source of the webview (iframe) to display |
 
 The `Iphone15Pro` component also accepts all properties of the `SVGElement` type.

apps/www/registry/example/iphone-15-pro-demo-2.tsx

@@ -5,7 +5,7 @@ export default function Iphone15ProDemo() {
     <div className="relative">
       <Iphone15Pro
         className="size-full"
-        src="https://via.placeholder.com/430x880"
+        imageSrc="https://via.placeholder.com/430x880"
       />
     </div>
   );

apps/www/registry/example/iphone-15-pro-demo-4.tsx

@@ -0,0 +1,9 @@
+import { Iphone15Pro } from "@/registry/magicui/iphone-15-pro";
+
+export default function Iphone15ProDemo() {
+  return (
+    <div className="relative">
+      <Iphone15Pro className="size-full" webviewSrc="https://magicui.design" />
+    </div>
+  );
+}

apps/www/registry/magicui/iphone-15-pro.tsx

@@ -3,22 +3,27 @@ import { SVGProps } from "react";
 export interface Iphone15ProProps extends SVGProps<SVGSVGElement> {
   width?: number;
   height?: number;
-  src?: string;
+  imageSrc?: string;
   videoSrc?: string;
+  webviewSrc?: string;
 }
 
 export function Iphone15Pro({
   width = 433,
   height = 882,
-  src,
+  imageSrc,
   videoSrc,
+  webviewSrc,
   ...props
 }: Iphone15ProProps) {
+  const originalWidth: number = 433;
+  const originalHeight: number = 882;
+
   return (
     <svg
       width={width}
       height={height}
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox={`0 0 ${originalWidth} ${originalHeight}`} // Maintain original aspect ratio (fixed viewBox)
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
@@ -57,9 +62,9 @@ export function Iphone15Pro({
         className="fill-[#E5E5E5] stroke-[#E5E5E5] stroke-[0.5] dark:fill-[#404040] dark:stroke-[#404040]"
       />
 
-      {src && (
+      {imageSrc && (
         <image
-          href={src}
+          href={imageSrc}
           x="21.25"
           y="19.25"
           width="389.5"
@@ -80,6 +85,20 @@ export function Iphone15Pro({
           />
         </foreignObject>
       )}
+      {webviewSrc && (
+        <foreignObject x="21.25" y="19.25" width="389.5" height="843.5">
+          <iframe
+            title="iPhone 15 Pro WebView"
+            className="size-full overflow-hidden rounded-[55.75px] object-cover"
+            src={webviewSrc}
+            loading="lazy"
+            allowFullScreen
+            sandbox="allow-scripts allow-same-origin allow-forms allow-popups"
+            referrerPolicy="no-referrer"
+            style={{ width: "100%", height: "100%", border: "0" }} // Fallback for browsers that do not support
+          />
+        </foreignObject>
+      )}
       <path
         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"
         className="fill-[#F5F5F5] dark:fill-[#262626]"