30 lines
2.1 KiB
PHP
30 lines
2.1 KiB
PHP
{{-- APP UI元素設定 列表控制列：每頁筆數下拉（左）+ 搜尋欄/重置（右）。一般 GET 表單（非 AJAX）。
|
||
用法：<x-app-list-controls :route="route('admin.app.ui-elements')" :perPage="$perPage" :search="$search" :placeholder="__('...')" /> --}}
|
||
@props([
|
||
'route' => '',
|
||
'perPage' => 10,
|
||
'search' => '',
|
||
'placeholder' => '',
|
||
])
|
||
|
||
<form method="GET" action="{{ $route }}" class="flex flex-wrap items-center justify-between gap-3 mb-4">
|
||
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
|
||
<span>{{ __('Show') }}</span>
|
||
<select name="per_page" onchange="this.form.submit()" class="luxury-input py-1.5 pl-3 pr-8 text-sm w-auto cursor-pointer">
|
||
@foreach([10, 25, 50, 100] as $n)
|
||
<option value="{{ $n }}" {{ (int)$perPage === $n ? 'selected' : '' }}>{{ $n }}</option>
|
||
@endforeach
|
||
</select>
|
||
<span>{{ __('entries') }}</span>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<input type="text" name="search" value="{{ $search }}" placeholder="{{ $placeholder ?: __('Search...') }}" class="luxury-input py-2 px-3 text-sm sm:w-72">
|
||
<button type="submit" class="p-2.5 rounded-xl bg-cyan-500 text-white hover:bg-cyan-600 shadow-lg shadow-cyan-500/25 transition-all active:scale-95" title="{{ __('Search') }}">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
|
||
</button>
|
||
<a href="{{ $route }}" class="p-2.5 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-500 hover:bg-slate-200 dark:hover:bg-slate-700 transition-all active:scale-95" title="{{ __('Reset') }}">
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5"><path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>
|
||
</a>
|
||
</div>
|
||
</form>
|