Andreas Reinhold / reiniandClaude Opus 5
cbf874a5a6
tests / lint (push) Has been cancelled
tests / feature (8.4) (push) Has been cancelled
tests / feature (8.5) (push) Has been cancelled
tests / browser (chrome, chromium) (push) Has been cancelled
tests / browser (firefox, firefox) (push) Has been cancelled
tests / browser (safari, webkit) (push) Has been cancelled
Shows the plain tooltip on its own, checks that every component appears in the showcase, and records the namespace change and the fresh application check in the plan. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
76 lines
4.5 KiB
PHP
76 lines
4.5 KiB
PHP
@php
|
|
$examples = [
|
|
'Badges' => <<<'BLADE'
|
|
<span class="relative inline-flex"><x-icon name="notifications" /><x-badge floating /></span>
|
|
<span class="relative inline-flex"><x-icon name="mail" /><x-badge value="4" floating /></span>
|
|
<span class="relative inline-flex"><x-icon name="inbox" /><x-badge value="1204" max="999" floating /></span>
|
|
<x-badge value="Expired" tonal />
|
|
<x-badge value="Active" color="success" tonal />
|
|
<x-badge value="Password" color="info" tonal />
|
|
<x-badge value="Pro" outline />
|
|
BLADE,
|
|
'Snackbars' => <<<'BLADE'
|
|
<x-button label="Saved" variant="tonal" x-on:click="materialToast('Settings saved', { type: 'success' })" />
|
|
<x-button label="With a description" variant="tonal" x-on:click="materialToast('Upload failed', { type: 'error', description: 'The file is larger than 4 GB.' })" />
|
|
<x-button label="With an action" variant="tonal" x-on:click="materialToast('Share deleted', { action: { label: 'Undo', handler: () => materialToast('Share restored', { type: 'info' }) } })" />
|
|
<x-button label="Until dismissed" variant="tonal" x-on:click="materialToast('Your storage is almost full', { type: 'warning', timeout: 0 })" />
|
|
BLADE,
|
|
'Plain tooltips' => <<<'BLADE'
|
|
<x-button icon="content_copy" tooltip="Copy link" />
|
|
<x-button icon="qr_code_2" tooltip-bottom="Show QR code" />
|
|
<x-tooltip text="Expires in 3 days" side="right">
|
|
<span tabindex="0" class="focus-ring rounded-corner-xs type-body-md text-on-surface-variant">holiday-photos.zip</span>
|
|
</x-tooltip>
|
|
BLADE,
|
|
'Rich tooltips' => <<<'BLADE'
|
|
<x-rich-tooltip title="Expiry" text="Recipients lose access after this time. Admins can change the longest time allowed.">
|
|
<x-button icon="help" aria-label="About expiry" />
|
|
</x-rich-tooltip>
|
|
|
|
<x-rich-tooltip title="Password protection" text="Recipients need the password before they can see the files." persistent>
|
|
<x-button label="Press for details" icon="lock" variant="outlined" />
|
|
<x-slot:actions>
|
|
<x-button label="Learn more" />
|
|
</x-slot:actions>
|
|
</x-rich-tooltip>
|
|
BLADE,
|
|
'Alerts' => <<<'BLADE'
|
|
<x-alert title="Storage almost full" description="3.8 GB of 4 GB used. Old shares are deleted when they expire." color="warning" class="w-full" />
|
|
<x-alert description="Links are shown only once. Copy yours before you leave the page." class="w-full" dismissible />
|
|
<x-alert title="Upload failed" color="error" class="w-full">
|
|
The connection dropped at 64%.
|
|
<x-slot:actions><x-button label="Try again" /></x-slot:actions>
|
|
</x-alert>
|
|
<x-alert description="Settings saved." color="success" class="w-full" />
|
|
BLADE,
|
|
'Stats' => <<<'BLADE'
|
|
<div class="grid w-full gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<x-stat title="Shares" value="1,204" icon="link" description="12 this week" />
|
|
<x-stat title="Files" value="8,317" icon="description" />
|
|
<x-stat title="Stored" value="3.2 GB" icon="hard_drive" description="of 4 GB" />
|
|
<x-stat title="Downloads" value="42,019" icon="download" />
|
|
</div>
|
|
BLADE,
|
|
'Empty state' => <<<'BLADE'
|
|
<x-empty-state icon="upload_file" title="No shares yet" description="Files you share appear here, with their links and when they expire." class="w-full">
|
|
<x-slot:actions>
|
|
<x-button label="Upload files" icon="upload" variant="filled" />
|
|
</x-slot:actions>
|
|
</x-empty-state>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="communication" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Communication</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-badge></code>, <code><x-toast></code> (the snackbar host, fed by the <code>Toasts</code> concern or <code>materialToast()</code>),
|
|
<code><x-tooltip></code>, <code><x-rich-tooltip></code>, <code><x-alert></code>, <code><x-stat></code> and <code><x-empty-state></code>.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|