{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "laptop-mockup",
  "title": "Laptop Mockup",
  "description": "A laptop device-frame illustration for showcasing app screens.",
  "dependencies": [],
  "files": [
    {
      "path": "components/illustration/laptop-mockup.tsx",
      "type": "registry:ui",
      "content": "'use client'\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from 'react'\nimport { cn } from '@/lib/utils'\n\nconst laptopChassisVariants = {\n  gray: {\n    border: 'border-(--color-border)',\n    base: 'bg-(--color-muted)',\n    notch: 'bg-(--color-border)',\n  },\n  titanium: {\n    border: 'border-(--color-foreground)',\n    base: 'bg-(--color-card)',\n    notch: 'bg-(--color-muted)',\n  },\n} as const\n\ntype LaptopChassisVariant = keyof typeof laptopChassisVariants\n\ntype LaptopMockupCardProps = Readonly<\n  ComponentPropsWithoutRef<'div'> & {\n    variant?: LaptopChassisVariant\n    children?: ReactNode\n  }\n>\n\nexport const LaptopMockupCard = forwardRef<HTMLDivElement, LaptopMockupCardProps>(\n  ({ className, children, variant = 'gray', ...props }, ref) => {\n    const frame = laptopChassisVariants[variant]\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"laptop-mockup-card\"\n        data-variant={variant}\n        className={cn('flex flex-col items-center font-sans', className)}\n        {...props}\n      >\n        <div\n          className={cn(\n            'w-[280px] overflow-hidden rounded-t-xl border-2 border-b-0 shadow-xl md:w-[384px]',\n            frame.border,\n          )}\n        >\n          <div className=\"bg-black p-1.5 pb-0\">\n            <div className=\"relative h-[184px] overflow-hidden rounded-t-[4px] bg-black md:h-[252px]\">\n              <div className=\"relative size-full overflow-hidden rounded-t-[4px]\">{children}</div>\n            </div>\n          </div>\n        </div>\n\n        <div\n          className={cn('relative h-2.5 w-[315px] rounded-b-xl md:h-3 md:w-[432px]', frame.base)}\n        >\n          <div\n            className={cn(\n              'absolute top-0 left-1/2 h-1 w-14 -translate-x-1/2 rounded-b-md md:w-16',\n              frame.notch,\n            )}\n            aria-hidden=\"true\"\n          />\n        </div>\n      </div>\n    )\n  },\n)\n\nLaptopMockupCard.displayName = 'LaptopMockupCard'\n"
    }
  ],
  "type": "registry:ui"
}