Andreas Reinhold / reiniandClaude Sonnet 5
9c8b39600b
Plan step 38 (first batch): layout.blade.php, index.blade.php, section.blade.php, shell.blade.php and the example component now lay out through the layout components (pane, stack, row, grid, surface) and their props, text through the md-* classes, and everything else through showcase.css's data-md-showcase-* hooks — no Tailwind utility remains in any of them. The head links the new stylesheet route after @vite(...), not before: that entry opens the document's first @layer statement, and linking the showcase's own bundle ahead of it re-anchors the material layer before Tailwind's own and lets its preflight's `padding: 0` beat the search view's padding-top (found by a failing browser test). @vite(...) stays, its Tailwind CSS entry included, only for the section views (still Tailwind until the next batches) and the JS runtime; the config comment says so. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
39 lines
2.5 KiB
PHP
39 lines
2.5 KiB
PHP
@extends('livewire-material::showcase.layout')
|
|
|
|
@section('content')
|
|
<x-livewire-material::pane width="wide" data-md-showcase-page>
|
|
<x-livewire-material::stack gap="space600">
|
|
<x-livewire-material::stack gap="space150">
|
|
<h1 class="md-type-headline-lg">Livewire Material</h1>
|
|
<p class="md-type-title-lg">Material 3 Expressive for Laravel and Livewire.</p>
|
|
<p class="md-type-body-lg md-ink-variant">
|
|
Every token and component, rendered in this application's own scheme and theme. Pick a section in the
|
|
navigation, search for one above (or press <kbd class="md-type-label-md" data-md-showcase-kbd>/</kbd>), or start below.
|
|
</p>
|
|
</x-livewire-material::stack>
|
|
|
|
@foreach (collect($sections)->groupBy('group', preserveKeys: true) as $group => $entries)
|
|
<x-livewire-material::stack as="section" gap="space200" :aria-labelledby="'group-'.\Illuminate\Support\Str::slug($group)">
|
|
<h2 id="group-{{ \Illuminate\Support\Str::slug($group) }}" class="md-type-title-lg">{{ $group }}</h2>
|
|
|
|
<x-livewire-material::grid :columns="['compact' => 1, 'medium' => 2, 'expanded' => 3]" gap="space200">
|
|
@foreach ($entries as $key => $entry)
|
|
<x-livewire-material::card variant="outlined" data-md-list-row wire:key="section-{{ $key }}">
|
|
<x-livewire-material::row gap="space200" align="start">
|
|
<span data-md-showcase-section-icon>
|
|
<x-livewire-material::icon :name="$entry['icon']" />
|
|
</span>
|
|
<x-livewire-material::stack gap="space50">
|
|
<a href="{{ route('livewire-material.section', $key) }}" wire:navigate data-md-list-open class="md-type-title-md">{{ $entry['title'] }}</a>
|
|
<p class="md-type-body-md md-ink-variant">{{ $entry['description'] }}</p>
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::row>
|
|
</x-livewire-material::card>
|
|
@endforeach
|
|
</x-livewire-material::grid>
|
|
</x-livewire-material::stack>
|
|
@endforeach
|
|
</x-livewire-material::stack>
|
|
</x-livewire-material::pane>
|
|
@endsection
|