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
1.7 KiB
PHP
37 lines
1.7 KiB
PHP
{{-- One section of the showcase on a page of its own, with the way on to the next. The page's
|
|
heading names the section, so the section's own heading is only for a screen reader. --}}
|
|
|
|
@extends('livewire-material::showcase.layout')
|
|
|
|
@php
|
|
$keys = array_keys($sections);
|
|
$at = array_search($section, $keys, true);
|
|
$previous = $keys[$at - 1] ?? null;
|
|
$next = $keys[$at + 1] ?? null;
|
|
@endphp
|
|
|
|
@section('content')
|
|
<div class="mx-auto w-full max-w-6xl px-4 pt-4 pb-16 sm:px-6">
|
|
<header class="mb-6 space-y-1">
|
|
<p class="type-label-lg text-on-surface-variant">{{ $sections[$section]['group'] }}</p>
|
|
<h1 class="type-headline-lg">{{ $sections[$section]['title'] }}</h1>
|
|
</header>
|
|
|
|
<div class="space-y-16 [&>section>h2]:sr-only">
|
|
@include('livewire-material::showcase.sections.'.$section)
|
|
|
|
<nav aria-label="Sections" class="flex flex-wrap items-center justify-between gap-4 border-t border-divider pt-6">
|
|
@if ($previous)
|
|
<x-livewire-material::button variant="text" icon="arrow_back" :label="$sections[$previous]['title']" :link="route('livewire-material.section', $previous)" data-test="previous-section" />
|
|
@else
|
|
<x-livewire-material::button variant="text" icon="arrow_back" label="Overview" :link="route('livewire-material.showcase')" data-test="previous-section" />
|
|
@endif
|
|
|
|
@if ($next)
|
|
<x-livewire-material::button variant="tonal" icon-right="arrow_forward" :label="$sections[$next]['title']" :link="route('livewire-material.section', $next)" data-test="next-section" />
|
|
@endif
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
@endsection
|