Phone Mockup

1'use client'
2 
3import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react'
4import { cn } from '@/lib/utils'
5 
6const mockupChassisVariants = {
7  black: {
8    frame: 'bg-(--color-foreground)',
9    button: 'bg-(--color-foreground)',
10  },
11  white: {
12    frame: 'bg-(--color-card)',
13    button: 'bg-(--color-card)',
14  },
15  accent: {
16    frame:
17      'bg-(--color-accent) dark:bg-[color-mix(in_srgb,var(--color-accent)_60%,var(--color-card))]',
18    button:
19      'bg-(--color-accent) dark:bg-[color-mix(in_srgb,var(--color-accent)_60%,var(--color-card))]',
20  },
21} as const
22 
23type MockupChassisVariant = keyof typeof mockupChassisVariants
24 
25const CHASSIS_ASPECT_RATIO = 70.6 / 146.6
26 
27type PhoneMockupCardProps = Readonly<
28  ComponentPropsWithoutRef<'div'> & {
29    variant?: MockupChassisVariant
30    visibleRatio?: number
31    showDynamicIsland?: boolean
32  }
33>
34 
35const sideControlClass = (color: string) => cn('absolute w-0.5 rounded-l-sm', color)
36 
37function SideControls({
38  frame,
39}: Readonly<{
40  frame: (typeof mockupChassisVariants)[MockupChassisVariant]
41}>) {
42  return (
43    <>
44      <div
45        className={cn(sideControlClass(frame.button), 'top-[15.5%] -left-0.5 h-[3.2%]')}
46        aria-hidden="true"
47      />
48      <div
49        className={cn(sideControlClass(frame.button), 'top-[21%] -left-0.5 h-[7.2%]')}
50        aria-hidden="true"
51      />
52      <div
53        className={cn(sideControlClass(frame.button), 'top-[30.5%] -left-0.5 h-[7.2%]')}
54        aria-hidden="true"
55      />
56      <div
57        className={cn(
58          sideControlClass(frame.button),
59          'top-[23%] -right-0.5 h-[11.5%] rounded-l-none rounded-r-sm',
60        )}
61        aria-hidden="true"
62      />
63    </>
64  )
65}
66 
67function MockupScreen({
68  children,
69  showDynamicIsland,
70}: Readonly<{
71  children: ReactNode
72  showDynamicIsland: boolean
73}>) {
74  return (
75    <div className="relative h-full w-full overflow-hidden rounded-[2.5rem] bg-black">
76      <div className="absolute inset-[3.5px] overflow-hidden rounded-[2.3rem] bg-white">
77        <div className="relative h-full w-full">{children}</div>
78        {showDynamicIsland && (
79          <div
80            className="absolute top-[9px] left-1/2 z-20 h-5 w-[66px] -translate-x-1/2 rounded-full bg-black"
81            aria-hidden="true"
82          >
83            <div
84              className="absolute top-1/2 right-[5px] block h-2 w-2 shrink-0 -translate-y-1/2 rounded-full bg-(--color-muted)/40"
85              aria-hidden="true"
86            />
87          </div>
88// … truncated