MacBook

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5export interface MacBookProps extends React.ComponentProps<"div"> {
6  /** Largest width the machine 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  /** Draw the camera housing cut into the top of the display. */
13  notch?: boolean
14  /** Draw the base the lid stands on. */
15  base?: boolean
16}
17 
18/**
19 * MacBook Pro 14" in points. The base is a little wider than the lid, which is
20 * the only reason the machine reads as standing on something rather than
21 * floating above a bar.
22 */
23const LID_WIDTH = 1544
24const LID_HEIGHT = 1014
25const BASE_WIDTH = 1600
26const BASE_HEIGHT = 26
27 
28export function MacBook({
29  children,
30  src,
31  alt = "",
32  width = 620,
33  notch = true,
34  base = true,
35  className,
36  style,
37  ...props
38}: MacBookProps) {
39  const height = LID_HEIGHT + (base ? BASE_HEIGHT : 0)
40 
41  // Shares of the whole machine's width, so the lid, the base and the scoop
42  // stay in step with each other at any size.
43  const cq = (points: number) =>
44    `${((points / BASE_WIDTH) * 100).toFixed(4)}cqw`
45 
46  return (
47    <div
48      data-slot="macbook"
49      className={cn("relative w-full", className)}
50      style={{
51        maxWidth: width,
52        aspectRatio: `${BASE_WIDTH} / ${height}`,
53        containerType: "inline-size",
54        ...style,
55      }}
56      {...props}
57    >
58      {/* The lid. Narrower than the base and centred on it. */}
59      <div
60        className="mx-auto bg-linear-to-br from-neutral-500 via-neutral-700 to-neutral-600 shadow-xl"
61        style={{
62          width: cq(LID_WIDTH),
63          height: cq(LID_HEIGHT),
64          borderRadius: cq(22),
65          padding: cq(16),
66        }}
67      >
68        <div
69          className="relative h-full w-full overflow-hidden bg-neutral-200 dark:bg-neutral-800"
70          style={{ borderRadius: cq(8) }}
71        >
72          {src ? (
73            <img src={src} alt={alt} className="h-full w-full object-cover" />
74          ) : (
75            children
76          )}
77 
78          {/* The camera housing is bezel that intrudes into the display, so it
79              is drawn over the screen rather than around it. */}
80          {notch ? (
81            <span
82              aria-hidden="true"
83              className="absolute top-0 left-1/2 -translate-x-1/2 bg-neutral-900"
84              style={{
85// … truncated