Skip to main content

Infrastructure

Forge Site Card code

Copy the implementation or inspect every file that belongs to this component unit.

resources/views/components/ui/forge-site-card.blade.php

@props([
    'domain',
    'forgeDomain' => null,
    'repository' => null,
    'branch' => null,
    'php' => null,
    'status' => 'Live',
    'statusVariant' => 'green',
    'sslStatus' => null,
    'deployStatus' => null,
    'deployVariant' => 'brand',
    'href' => null,
    'stats' => [],
])

@php
    /*
    | Site summary card for Forge dashboards. Combines domain, source-control,
    | PHP, SSL and last-deploy metadata into one compact destination card.
    |
    | Usage:
    |   <x-ui.forge-site-card domain="app.example.com" repository="acme/app" branch="main" />
    */
    $stats = collect($stats)->filter(fn (array $stat): bool => filled($stat['label'] ?? null))->values();
    $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 text-base font-semibold text-gray-900 dark:text-white">{{ $domain }}</p>
            @if ($forgeDomain)
                <p class="mt-1 truncate text-xs text-gray-500 dark:text-gray-400">{{ $forgeDomain }}</p>
            @endif
        </div>

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

    <x-ui.status-bar class="mt-4" :items="array_values(array_filter([
        $repository ? ['icon' => 'git-branch', 'label' => 'Repo', 'value' => $repository] : null,
        $branch ? ['icon' => 'tree-structure', 'label' => 'Branch', 'value' => $branch] : null,
        $php ? ['icon' => 'code', 'label' => 'PHP', 'value' => $php] : null,
    ]))" />

    <div class="mt-5 flex flex-wrap items-center gap-2">
        @if ($sslStatus)
            <x-ui.badge variant="green" size="sm" icon="lock-key">{{ $sslStatus }}</x-ui.badge>
        @endif
        @if ($deployStatus)
            <x-ui.badge :variant="$deployVariant" size="sm" icon="rocket-launch">{{ $deployStatus }}</x-ui.badge>
        @endif
    </div>

    @if ($stats->isNotEmpty())
        <dl class="mt-5 grid grid-cols-2 gap-3 border-t border-gray-100 pt-4 dark:border-gray-800 sm:grid-cols-4">
            @foreach ($stats as $stat)
                <div class="min-w-0">
                    <dt class="truncate text-xs text-gray-500 dark:text-gray-400">{{ $stat['label'] }}</dt>
                    <dd class="mt-1 truncate text-sm font-semibold tabular-nums text-gray-900 dark:text-white">{{ $stat['value'] ?? '0' }}</dd>
                </div>
            @endforeach
        </dl>
    @endif
@if ($href)
    </a>
@else
    </article>
@endif