Forge Database Card code

@props([
    'name',
    'engine' => null,
    'status' => 'Online',
    'statusVariant' => 'green',
    'size' => null,
    'connections' => null,
    'users' => null,
    'sites' => [],
    'tables' => [],
    'host' => null,
    'port' => null,
    'username' => null,
    'href' => null,
])

@php
    /*
    | Database summary card for Forge-style server dashboards. Surfaces engine,
    | size, active connections, linked sites, tables and connection credentials.
    |
    | Usage:
    |   <x-ui.forge-database-card
    |       name="app"
    |       engine="PostgreSQL 18"
    |       size="1.2 GB"
    |       :connections="12"
    |       :users="2"
    |       :sites="['app.example.com']"
    |       :tables="['users', 'posts', 'jobs']"
    |       host="127.0.0.1"
    |       port="5432"
    |       username="forge"
    |   />
    */
    $sites = collect($sites)->filter()->values();
    $tables = collect($tables)->filter()->values();
    $stats = array_filter([
        'Size' => $size,
        'Connections' => is_numeric($connections) ? number_format((int) $connections) : $connections,
        'Users' => is_numeric($users) ? number_format((int) $users) : $users,
    ], fn (?string $value): bool => filled($value));

    $classes = 'block min-w-0 rounded-xl border border-gray-200 bg-white p-5 shadow-sm transition dark:border-gray-800 dark:bg-gray-900';
@endphp

@if ($href)
    <a href="{{ $href }}" {{ $attributes->merge(['class' => $classes.' hover:border-brand-300 hover:bg-gray-50 dark:hover:border-brand-800 dark:hover:bg-gray-900/70']) }}>
@else
    <article {{ $attributes->merge(['class' => $classes]) }}>
@endif
        <div class="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4">
            <div class="min-w-0">
                <p class="truncate font-mono text-sm font-semibold text-gray-900 dark:text-white">{{ $name }}</p>
                @if ($engine)
                    <p class="mt-1 truncate text-xs text-gray-500 dark:text-gray-400">{{ $engine }}</p>
                @endif
            </div>

            <x-ui.badge :variant="$statusVariant" size="sm" dot class="w-fit sm:shrink-0">{{ $status }}</x-ui.badge>
        </div>

        @if (! empty($stats))
            <dl class="mt-5 grid gap-3 sm:grid-cols-3">
                @foreach ($stats as $label => $value)
                    <div class="min-w-0 rounded-lg bg-gray-50 p-3 dark:bg-gray-950/40">
                        <dt class="text-xs text-gray-500 dark:text-gray-400">{{ $label }}</dt>
                        <dd class="mt-1 truncate text-sm font-semibold tabular-nums text-gray-900 dark:text-white">{{ $value }}</dd>
                    </div>
                @endforeach
            </dl>
        @endif

        @if ($sites->isNotEmpty())
            <div class="mt-4">
                <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">Sites</p>
                <div class="flex flex-wrap gap-1.5">
                    @foreach ($sites as $site)
                        <x-ui.badge variant="gray" size="sm" icon="globe">{{ $site }}</x-ui.badge>
                    @endforeach
                </div>
            </div>
        @endif

        @if ($tables->isNotEmpty())
            <div class="mt-4">
                <p class="mb-2 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500">Tables</p>
                <div class="flex flex-wrap gap-1.5">
                    @foreach ($tables as $table)
                        <x-ui.badge variant="gray" size="sm" icon="table" class="font-mono">{{ $table }}</x-ui.badge>
                    @endforeach
                </div>
            </div>
        @endif

        <x-ui.status-bar class="mt-5" :items="array_values(array_filter([
            $host ? ['icon' => 'hard-drives', 'label' => 'Host', 'value' => $host] : null,
            filled($port) ? ['icon' => 'plugs-connected', 'label' => 'Port', 'value' => (string) $port] : null,
            $username ? ['icon' => 'user', 'label' => 'Username', 'value' => $username] : null,
        ]))" />
@if ($href)
    </a>
@else
    </article>
@endif