Laptop Mockup

1'use client'
2 
3import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react'
4import { cn } from '@/lib/utils'
5 
6const laptopChassisVariants = {
7  gray: {
8    border: 'border-(--color-border)',
9    base: 'bg-(--color-muted)',
10    notch: 'bg-(--color-border)',
11  },
12  titanium: {
13    border: 'border-(--color-foreground)',
14    base: 'bg-(--color-card)',
15    notch: 'bg-(--color-muted)',
16  },
17} as const
18 
19type LaptopChassisVariant = keyof typeof laptopChassisVariants
20 
21type LaptopMockupCardProps = Readonly<
22  ComponentPropsWithoutRef<'div'> & {
23    variant?: LaptopChassisVariant
24    children?: ReactNode
25  }
26>
27 
28export const LaptopMockupCard = forwardRef<HTMLDivElement, LaptopMockupCardProps>(
29  ({ className, children, variant = 'gray', ...props }, ref) => {
30    const frame = laptopChassisVariants[variant]
31 
32    return (
33      <div
34        ref={ref}
35        data-slot="laptop-mockup-card"
36        data-variant={variant}
37        className={cn('flex flex-col items-center font-sans', className)}
38        {...props}
39      >
40        <div
41          className={cn(
42            'w-[280px] overflow-hidden rounded-t-xl border-2 border-b-0 shadow-xl md:w-[384px]',
43            frame.border,
44          )}
45        >
46          <div className="bg-black p-1.5 pb-0">
47            <div className="relative h-[184px] overflow-hidden rounded-t-[4px] bg-black md:h-[252px]">
48              <div className="relative size-full overflow-hidden rounded-t-[4px]">{children}</div>
49            </div>
50          </div>
51        </div>
52 
53        <div
54          className={cn('relative h-2.5 w-[315px] rounded-b-xl md:h-3 md:w-[432px]', frame.base)}
55        >
56          <div
57            className={cn(
58              'absolute top-0 left-1/2 h-1 w-14 -translate-x-1/2 rounded-b-md md:w-16',
59              frame.notch,
60            )}
61            aria-hidden="true"
62          />
63        </div>
64      </div>
65    )
66  },
67)
68 
69LaptopMockupCard.displayName = 'LaptopMockupCard'