Forge Ssh Key Card code

@props([
    'name',
    'fingerprint',
    'addedAt' => null,
    'type' => 'SSH key',
    'attached' => [],
    'deployKey' => false,
    'publicKey' => null,
])

@php
    /*
    | SSH key card for account keys, server keys and deploy keys. It keeps the
    | fingerprint readable while still making attached resources visible.
    |
    | Usage:
    |   <x-ui.forge-ssh-key-card name="MacBook Pro" fingerprint="SHA256:..." />
    */
    $attached = collect($attached)->filter()->values();
    $publicKeyParts = $publicKey ? preg_split('/\s+/', trim((string) $publicKey), 3) : [];
@endphp

<article {{ $attributes->merge(['class' => 'min-w-0 rounded-xl border border-gray-200 bg-white p-5 shadow-sm dark:border-gray-800 dark:bg-gray-900']) }}>
    <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-sm font-semibold text-gray-900 dark:text-white">{{ $name }}</p>
            <p class="mt-1 truncate font-mono text-xs text-gray-500 dark:text-gray-400">{{ $fingerprint }}</p>
        </div>

        <x-ui.badge :variant="$deployKey ? 'blue' : 'gray'" size="sm" class="w-fit sm:shrink-0">{{ $deployKey ? 'Deploy key' : $type }}</x-ui.badge>
    </div>

    <x-ui.status-bar class="mt-4" :items="array_values(array_filter([
        $addedAt ? ['icon' => 'calendar-blank', 'label' => 'Added', 'value' => $addedAt] : null,
    ]))" />

    @if ($attached->isNotEmpty())
        <div class="mt-4 flex flex-wrap gap-1.5">
            @foreach ($attached as $resource)
                <x-ui.badge variant="gray" size="sm">{{ $resource }}</x-ui.badge>
            @endforeach
        </div>
    @endif

    @if ($publicKey)
        <pre class="mt-4 max-w-full overflow-x-auto rounded-lg bg-gray-950 px-3 py-2 font-mono text-[11px] leading-5 text-gray-200 sm:text-xs [&_.tok-com]:text-gray-500 [&_.tok-com]:italic [&_.tok-key]:text-brand-300 [&_.tok-var]:text-gray-100"><code class="block min-w-0 whitespace-pre-wrap break-all">@if (count($publicKeyParts) >= 2)<span class="tok-key">{{ $publicKeyParts[0] }}</span> <span class="tok-var">{{ $publicKeyParts[1] }}</span>@if (isset($publicKeyParts[2])) <span class="tok-com">{{ $publicKeyParts[2] }}</span>@endif @else{{ $publicKey }}@endif</code></pre>
    @endif
</article>