50 lines
2.3 KiB
PHP
Executable File
50 lines
2.3 KiB
PHP
Executable File
@props([
|
|
'title',
|
|
'items',
|
|
'formPrefix',
|
|
'saveMethod',
|
|
'editMethod',
|
|
'deleteMethod',
|
|
'resetMethod',
|
|
'nameField' => 'name',
|
|
])
|
|
|
|
<section class="grid gap-6 xl:grid-cols-[22rem_minmax(0,1fr)]">
|
|
<form wire:submit="{{ $saveMethod }}" class="space-y-4 rounded-2xl border border-zinc-200 bg-white p-5 dark:border-zinc-700 dark:bg-zinc-900">
|
|
<flux:heading size="lg">{{ __($title) }}</flux:heading>
|
|
|
|
<flux:input wire:model="{{ $formPrefix }}.{{ $nameField }}" :label="__('Name')" required />
|
|
|
|
@if ($nameField !== 'slug')
|
|
<flux:input wire:model="{{ $formPrefix }}.slug" :label="__('Slug')" />
|
|
@endif
|
|
|
|
<div class="flex gap-2">
|
|
<flux:button type="submit" variant="primary">{{ __('Save') }}</flux:button>
|
|
<flux:button type="button" wire:click="{{ $resetMethod }}">{{ __('Reset') }}</flux:button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="overflow-hidden rounded-2xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="border-b border-zinc-200 px-5 py-4 dark:border-zinc-700">
|
|
<flux:heading size="sm">{{ __($title) }}</flux:heading>
|
|
</div>
|
|
<div class="divide-y divide-zinc-100 dark:divide-zinc-800">
|
|
@forelse ($items as $item)
|
|
<div class="flex items-center justify-between gap-4 px-5 py-3">
|
|
<div class="min-w-0">
|
|
<div class="truncate font-medium">{{ data_get($item, $nameField) }}</div>
|
|
@if (data_get($item, 'slug'))<div class="truncate text-xs text-zinc-500">{{ data_get($item, 'slug') }}</div>@endif
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<flux:button size="sm" type="button" wire:click="{{ $editMethod }}({{ $item->id }})">{{ __('Edit') }}</flux:button>
|
|
<flux:button size="sm" variant="danger" type="button" wire:click="{{ $deleteMethod }}({{ $item->id }})" wire:confirm="{{ __('Delete this item?') }}">{{ __('Delete') }}</flux:button>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="px-5 py-10 text-center text-sm text-zinc-500">{{ __('No items yet.') }}</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</section>
|