iPhone

1import type { HTMLAttributes } from "react"
2 
3const PHONE_WIDTH = 433
4const PHONE_HEIGHT = 882
5const SCREEN_X = 21.25
6const SCREEN_Y = 19.25
7const SCREEN_WIDTH = 389.5
8const SCREEN_HEIGHT = 843.5
9const SCREEN_RADIUS = 55.75
10 
11// Calculated percentages
12const LEFT_PCT = (SCREEN_X / PHONE_WIDTH) * 100
13const TOP_PCT = (SCREEN_Y / PHONE_HEIGHT) * 100
14const WIDTH_PCT = (SCREEN_WIDTH / PHONE_WIDTH) * 100
15const HEIGHT_PCT = (SCREEN_HEIGHT / PHONE_HEIGHT) * 100
16const RADIUS_H = (SCREEN_RADIUS / SCREEN_WIDTH) * 100
17const RADIUS_V = (SCREEN_RADIUS / SCREEN_HEIGHT) * 100
18 
19export interface IphoneProps extends HTMLAttributes<HTMLDivElement> {
20  src?: string
21  videoSrc?: string
22}
23 
24export function Iphone({
25  src,
26  videoSrc,
27  className,
28  style,
29  ...props
30}: IphoneProps) {
31  const hasVideo = !!videoSrc
32  const hasMedia = hasVideo || !!src
33 
34  return (
35    <div
36      className={`relative inline-block w-full align-middle leading-none ${className}`}
37      style={{
38        aspectRatio: `${PHONE_WIDTH}/${PHONE_HEIGHT}`,
39        ...style,
40      }}
41      {...props}
42    >
43      {hasVideo && (
44        <div
45          className="pointer-events-none absolute z-0 overflow-hidden"
46          style={{
47            left: `${LEFT_PCT}%`,
48            top: `${TOP_PCT}%`,
49            width: `${WIDTH_PCT}%`,
50            height: `${HEIGHT_PCT}%`,
51            borderRadius: `${RADIUS_H}% / ${RADIUS_V}%`,
52          }}
53        >
54          <video
55            className="block size-full object-cover"
56            src={videoSrc}
57            autoPlay
58            loop
59            muted
60            playsInline
61            preload="metadata"
62          />
63        </div>
64      )}
65 
66      {!hasVideo && src && (
67        <div
68          className="pointer-events-none absolute z-0 overflow-hidden"
69          style={{
70            left: `${LEFT_PCT}%`,
71            top: `${TOP_PCT}%`,
72            width: `${WIDTH_PCT}%`,
73            height: `${HEIGHT_PCT}%`,
74            borderRadius: `${RADIUS_H}% / ${RADIUS_V}%`,
75          }}
76        >
77          <img
78            src={src}
79            alt=""
80            className="block size-full object-cover object-top"
81          />
82        </div>
83      )}
84 
85      <svg
86        viewBox={`0 0 ${PHONE_WIDTH} ${PHONE_HEIGHT}`}
87        fill="none"
88        xmlns="http://www.w3.org/2000/svg"
89        className="absolute inset-0 size-full"
90        style={{ transform: "translateZ(0)" }}
91      >
92        <g mask={hasMedia ? "url(#screenPunch)" : undefined}>
93          <path
94// … truncated