Andreas Reinhold / reiniandClaude Opus 5
648ad8efaf
tests / lint (push) Successful in 1m3s
tests / feature (8.4) (push) Failing after 1m5s
tests / feature (8.5) (push) Failing after 1m4s
tests / browser (chrome, chromium) (push) Failing after 1m5s
tests / browser (firefox, firefox) (push) Failing after 1m1s
tests / browser (safari, webkit) (push) Failing after 1m1s
<x-toast> hosts the snackbar queue for the Toasts concern and window.materialToast(), one at a time, paused on hover and focus, with an optional action; it listens from the moment its script loads, so a toast dispatched before Alpine starts is shown rather than lost. <x-badge> is M3's dot and count, plus a tonal or outlined status label; <x-rich-tooltip> is transient or persistent; <x-alert>, <x-stat> and <x-empty-state> are built from M3's parts. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
38 lines
1.6 KiB
PHP
38 lines
1.6 KiB
PHP
{{-- "You have nothing here yet": an Expressive shape with an icon on it, a title, a line of
|
|
explanation and the action that fills the space.
|
|
|
|
<x-empty-state icon="upload_file" title="No shares yet" description="Files you share appear here.">
|
|
<x-slot:actions><x-button label="Upload files" variant="filled" link="/upload" /></x-slot:actions>
|
|
</x-empty-state>
|
|
|
|
Not an M3 component; built from M3 Expressive's parts — `shape` (any `<x-shape>` name,
|
|
`cookie-9` by default) in secondary-container behind the `icon` in on-secondary-container,
|
|
a title-large `title`, body-medium `description` or slot. For "your filter matched nothing"
|
|
use a plain line of text instead: a picture there is consolation for a typo. --}}
|
|
|
|
@props([
|
|
'icon' => 'inbox',
|
|
'shape' => 'cookie-9',
|
|
'title' => null,
|
|
'description' => null,
|
|
])
|
|
|
|
<div {{ $attributes->class('flex flex-col items-center gap-4 px-4 py-10 text-center') }}>
|
|
<div class="relative grid size-28 place-items-center">
|
|
<x-shape :name="$shape" class="absolute inset-0 size-full text-secondary-container" />
|
|
<x-icon :name="$icon" class="relative size-12 text-on-secondary-container" />
|
|
</div>
|
|
|
|
@if ($title)
|
|
<h3 class="type-title-lg">{{ $title }}</h3>
|
|
@endif
|
|
|
|
@if ($description || $slot->isNotEmpty())
|
|
<div class="max-w-md type-body-md text-on-surface-variant">{{ $description ?? $slot }}</div>
|
|
@endif
|
|
|
|
@isset($actions)
|
|
<div class="flex flex-wrap justify-center gap-3 pt-2">{{ $actions }}</div>
|
|
@endisset
|
|
</div>
|