Andreas Reinhold / reiniandClaude Opus 5
51bf034b74
tests / feature (8.5) (push) Successful in 1m14s
tests / lint (push) Successful in 1m1s
tests / feature (8.4) (push) Successful in 1m9s
tests / browser (chrome, chromium) (push) Successful in 3m22s
tests / browser (firefox, firefox) (push) Successful in 4m37s
tests / browser (safari, webkit) (push) Successful in 5m4s
A search app bar looks through every section, example and component, opens the section, or the example at its anchor on its page, and is reached from anywhere with / or Ctrl+K. Section pages now carry their own heading. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
37 lines
2.2 KiB
PHP
37 lines
2.2 KiB
PHP
@extends('livewire-material::showcase.layout')
|
|
|
|
@section('content')
|
|
<div class="mx-auto w-full max-w-6xl space-y-12 px-4 pt-4 pb-16 sm:px-6">
|
|
<div class="max-w-3xl space-y-3">
|
|
<h1 class="type-headline-lg">Livewire Material</h1>
|
|
<p class="type-title-lg">Material 3 Expressive for Laravel and Livewire.</p>
|
|
<p class="type-body-lg text-on-surface-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="rounded-corner-xs bg-surface-container-highest px-1.5 type-label-md">/</kbd>), or start below.
|
|
</p>
|
|
</div>
|
|
|
|
@foreach (collect($sections)->groupBy('group', preserveKeys: true) as $group => $entries)
|
|
<section class="space-y-4" aria-labelledby="group-{{ \Illuminate\Support\Str::slug($group) }}">
|
|
<h2 id="group-{{ \Illuminate\Support\Str::slug($group) }}" class="type-title-lg">{{ $group }}</h2>
|
|
|
|
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
@foreach ($entries as $key => $entry)
|
|
<x-livewire-material::card variant="outlined" data-list-row wire:key="section-{{ $key }}">
|
|
<div class="flex items-start gap-4">
|
|
<span class="grid size-12 shrink-0 place-items-center rounded-corner-lg bg-secondary-container text-on-secondary-container">
|
|
<x-livewire-material::icon :name="$entry['icon']" />
|
|
</span>
|
|
<div class="min-w-0">
|
|
<a href="{{ route('livewire-material.section', $key) }}" wire:navigate data-list-open class="type-title-md">{{ $entry['title'] }}</a>
|
|
<p class="mt-1 type-body-md text-on-surface-variant">{{ $entry['description'] }}</p>
|
|
</div>
|
|
</div>
|
|
</x-livewire-material::card>
|
|
@endforeach
|
|
</div>
|
|
</section>
|
|
@endforeach
|
|
</div>
|
|
@endsection
|