Mockups

# Brok UI: Device Mockup (`device`)

A static device frame (phone, tablet or laptop) that wraps any screen content.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add device
```

## Usage

```blade
<div class="flex flex-wrap items-end gap-10">
    <x-ui.device type="phone">
        <div class="h-full w-full bg-gradient-to-br from-primary/20 to-primary/5"></div>
    </x-ui.device>

    <x-ui.device type="laptop">
        <div class="h-full w-full bg-gradient-to-br from-primary/20 to-primary/5"></div>
    </x-ui.device>
</div>
```

## Props

- `type` (string, default `phone`) — Device frame: phone (default), tablet, or laptop.
- `color` (mixed|null, default `null`) — Bezel color class; defaults to bg-foreground.

## Use when

- Use only when visual expression supports storytelling, brand differentiation, or a clear showcase moment.
- Framing a screenshot or live content inside a phone, tablet, or laptop bezel for a marketing or documentation page.

## Avoid when

- Do not place heavy effects in task-dense workflows where clarity, speed, and readability matter more.
- The content needs a highly detailed, brand-accurate phone frame; use iphone-mockup instead.

## Anti-patterns

- Heavy effects in forms or task-dense workflows
- Motion that interferes with reading or focus

## Rules

- Use the `<brok:device>` tag (or `<x-ui.device>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/device
- Registry JSON (files, props, contract): https://brokui.dev/r/open/device.json

@props([
    'type' => 'phone',
    'color' => null,
])

@php
    // Bezel color token; defaults to the foreground (a dark, neutral frame).
    $bezel = $color ?: 'bg-foreground';

    $label = match ($type) {
        'tablet' => 'Tablet mockup',
        'laptop' => 'Laptop mockup',
        default => 'Phone mockup',
    };
@endphp

<div
    data-slot="device"
    data-type="{{ $type }}"
    role="img"
    aria-label="{{ $label }}"
    {{ $attributes->merge(['class' => 'inline-block']) }}
>
    @if ($type === 'laptop')
        {{-- Screen on top of a base bar --}}
        <div class="w-80 max-w-full">
            <div class="{{ $bezel }} rounded-t-md p-2 shadow-lg">
                <div class="aspect-[16/10] w-full overflow-hidden rounded-md bg-background">
                    {{ $slot }}
                </div>
            </div>
            <div class="{{ $bezel }} mx-auto h-3 w-[112%] -translate-x-[5.3%] rounded-b-md brightness-90">
                <div class="mx-auto h-2 w-16 rounded-b-md bg-background/20"></div>
            </div>
        </div>
    @elseif ($type === 'tablet')
        {{-- Wide frame, smaller radius, camera dot, no notch --}}
        <div class="{{ $bezel }} relative w-72 max-w-full rounded-[1.75rem] p-3 shadow-xl">
            <div class="absolute left-1/2 top-2 size-2 -translate-x-1/2 rounded-full bg-background/40" aria-hidden="true"></div>
            <div class="aspect-[4/3] w-full overflow-hidden rounded-[1.25rem] bg-background">
                {{ $slot }}
            </div>
        </div>
    @else
        {{-- Phone: tall frame, thick bezel, top notch --}}
        <div class="{{ $bezel }} relative w-56 max-w-full rounded-[2.5rem] p-3 shadow-xl">
            <div class="absolute left-1/2 top-3 z-10 h-5 w-24 -translate-x-1/2 rounded-b-md {{ $bezel }}" aria-hidden="true">
                <div class="mx-auto mt-2 h-1 w-10 rounded-full bg-background/30"></div>
            </div>
            <div class="aspect-[9/19] w-full overflow-hidden rounded-[2rem] bg-background">
                {{ $slot }}
            </div>
        </div>
    @endif
</div>