Andreas Reinhold / reiniandClaude Opus 5
cd64f4f371
tests / browser (firefox, firefox) (push) Successful in 1m54s
tests / browser (safari, webkit) (push) Successful in 2m17s
tests / lint (push) Successful in 59s
tests / feature (8.4) (push) Successful in 1m7s
tests / feature (8.5) (push) Successful in 1m0s
tests / browser (chrome, chromium) (push) Successful in 1m49s
<x-button> (label buttons, icon buttons and toggles in five sizes, with filled, tonal, outlined, elevated and text variants in any colour role), <x-tooltip>, <x-menu> with items, groups and separators, <x-button-group>, <x-group> as a connected button group, <x-split-button>, <x-fab>, <x-fab-menu> and <x-loading>. Sizes, colours and shapes come from androidx Compose Material 3's tokens; the loading indicator ports its Morph into SVG + SMIL. Menus follow WAI-ARIA's menu button pattern on popovers placed by CSS anchor positioning. Browser tests run in Chromium, Firefox and WebKit. The showcase fetches the icon names on demand: inlined, they tripped Pest's test server into HTTP 431s under Firefox. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
20 lines
845 B
PHP
20 lines
845 B
PHP
{{-- One showcase example: the Blade in `code`, rendered, with the source beside it — one string,
|
|
so what is shown and what is written can never disagree. --}}
|
|
|
|
@props(['title' => null, 'code', 'stack' => false])
|
|
|
|
<div class="space-y-4 rounded-corner-lg bg-surface-container p-4">
|
|
@if ($title)
|
|
<h3 class="type-title-md">{{ $title }}</h3>
|
|
@endif
|
|
|
|
<div @class(['flex flex-wrap items-center gap-4' => ! $stack, 'space-y-4' => $stack])>
|
|
{!! \Illuminate\Support\Facades\Blade::render($code) !!}
|
|
</div>
|
|
|
|
<details>
|
|
<summary class="w-fit cursor-pointer rounded-corner-xs type-label-md text-on-surface-variant focus-ring">Blade</summary>
|
|
<pre class="mt-2 overflow-x-auto rounded-corner-sm bg-surface-container-highest p-3 type-body-sm"><code>{{ trim($code) }}</code></pre>
|
|
</details>
|
|
</div>
|