Andreas Reinhold / reiniandClaude Opus 5
1e580c573e
Package views now write <x-livewire-material::button>, so a configured prefix (which Blade spells <x-m::button>) and an application component of the same name can no longer break or shadow them. The showcase rewrites its examples to the configured prefix. Adds the README, and waits for the adaptive rail to hear a resize before the navigation tests press its menu button. 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-livewire-material::shape :name="$shape" class="absolute inset-0 size-full text-secondary-container" />
|
|
<x-livewire-material::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>
|