reworked and recolored Table Component
This commit is contained in:
@@ -15,33 +15,36 @@
|
||||
|
||||
|
||||
<div class="container m-auto my-8">
|
||||
<table class="w-full">
|
||||
<thead class="border-b border-zinc-500">
|
||||
<tr class="text-left">
|
||||
<th class="px-8 py-4 font-bold text-lg">Name</th>
|
||||
<th class="px-8 py-4 font-bold text-lg text-center">Color</th>
|
||||
<th class="px-8 py-4 font-bold text-lg text-center">Hex</th>
|
||||
<th class="w-1/6"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach ($colors as $color)
|
||||
<tr wire:key="{{ $color->id }}" class="border-b border-zinc-600 hover:bg-zinc-900 transition duration-200">
|
||||
<td><p class="p-4 pl-8">{{ $color->name }}</p></td>
|
||||
<td><div class="w-8 h-8 rounded mx-auto" style="background-color: {{ $color->hex }}"></div></td>
|
||||
<td><p class="p-4 text-center">{{ $color->hex }}</p></td>
|
||||
<td class="text-right pr-8 flex flex-row gap-4 justify-end">
|
||||
<x-table>
|
||||
<x-slot name="tableheader">
|
||||
<x-table.header>Name</x-table.header>
|
||||
<x-table.header>Color</x-table.header>
|
||||
<x-table.header>Hex</x-table.header>
|
||||
<x-table.header>Rolls</x-table.header>
|
||||
<x-table.header class="w-1/6"></x-table.header>
|
||||
</x-slot>
|
||||
|
||||
@foreach ($colors as $color)
|
||||
<tr wire:key="{{ $color->id }}" class="border-b border-zinc-300">
|
||||
<x-table.item><p class="p-4 px-3 pl-6 font-bold">{{ $color->name }}</p></x-table.item>
|
||||
<x-table.item><div class="p-4 px-3 mx-3 h-8 rounded" style="background-color: {{ $color->hex }}"></div></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3 text-left">{{ $color->hex }}</p></x-table.item>
|
||||
<x-table.item><p class="p-4 px-3"></p></x-table.item>
|
||||
<x-table.item>
|
||||
<div class="flex flex-row gap-4 justify-end pr-8">
|
||||
<button type="button" wire:click="edit({{ $color->id }})" x-on:click="$wire.editModal = true" class="text-accent p-4 cursor-pointer flex flex-row gap-2"><flux:icon.pencil/>Edit</button>
|
||||
|
||||
|
||||
<button type="button" wire:click="delete({{ $color->id }})" wire:confirm="Are you sure?" class="text-accent p-4 cursor-pointer"><flux:icon.x-mark/></button>
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="p-4">
|
||||
{{ $colors->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</x-table.item>
|
||||
</tr>
|
||||
@endforeach
|
||||
|
||||
<x-slot name="pagination">
|
||||
{{ $colors->links() }}
|
||||
</x-slot>
|
||||
</x-table>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Create Form -->
|
||||
|
||||
Reference in New Issue
Block a user