iPad

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5export interface IPadProps extends React.ComponentProps<"div"> {
6  /** Largest width the device is drawn at, in pixels. It shrinks below this. */
7  width?: number
8  /** Screenshot to fill the screen with. */
9  src?: string
10  /** Description of the screenshot. Required whenever `src` is set. */
11  alt?: string
12  /** Which way up the tablet is held. */
13  orientation?: "portrait" | "landscape"
14  /** Draw the camera in the bezel above the screen. */
15  camera?: boolean
16}
17 
18/** iPad Pro 11" in points, held upright. */
19const SHORT_SIDE = 834
20const LONG_SIDE = 1194
21 
22export function IPad({
23  children,
24  src,
25  alt = "",
26  width = 420,
27  orientation = "portrait",
28  camera = true,
29  className,
30  style,
31  ...props
32}: IPadProps) {
33  const portrait = orientation === "portrait"
34  const deviceWidth = portrait ? SHORT_SIDE : LONG_SIDE
35  const deviceHeight = portrait ? LONG_SIDE : SHORT_SIDE
36 
37  // Every measurement is a share of the frame's own width, so the proportions
38  // hold at whatever size the frame ends up rather than at one tuned by eye.
39  const cq = (points: number) =>
40    `${((points / deviceWidth) * 100).toFixed(4)}cqw`
41 
42  return (
43    <div
44      data-slot="ipad"
45      className={cn("relative w-full", className)}
46      style={{
47        maxWidth: width,
48        aspectRatio: `${deviceWidth} / ${deviceHeight}`,
49        containerType: "inline-size",
50        ...style,
51      }}
52      {...props}
53    >
54      <div
55        className="absolute inset-0 bg-linear-to-br from-neutral-500 via-neutral-700 to-neutral-600 shadow-xl"
56        style={{ borderRadius: cq(50), padding: cq(22) }}
57      >
58        <div
59          className="relative h-full w-full overflow-hidden bg-neutral-200 dark:bg-neutral-800"
60          style={{ borderRadius: cq(32) }}
61        >
62          {src ? (
63            <img src={src} alt={alt} className="h-full w-full object-cover" />
64          ) : (
65            children
66          )}
67        </div>
68 
69        {/* In the bezel rather than on the screen, which is where it sits and
70            what keeps it out of anything laid over the display. */}
71        {camera ? (
72          <span
73            aria-hidden="true"
74            className="absolute left-1/2 -translate-x-1/2 rounded-full bg-neutral-900"
75            style={{ top: cq(8), width: cq(7), height: cq(7) }}
76          />
77        ) : null}
78      </div>
79    </div>
80  )
81}