changed livewire component names

2025-03-15 23:16:46 +01:00
parent 82b63aa682
commit 2e7f484eba
7 changed files with 30 additions and 31 deletions
@@ -0,0 +1,43 @@
+<section>
+    <x-header>
+        {{ __('Colors') }}
+    </x-header>
+
+    <div class="container m-auto my-8 bg-zinc-700 rounded">
+        <form method="POST" class="flex flex-col gap-4" wire:submit="create">
+            @csrf
+            <div class="flex justify-center gap-8 py-4">
+                <label class="text-lg content-center">New Color</label>
+                <input type="text" placeholder="Name" wire:model="name" class="bg-zinc-800 rounded" required/>
+                <input type="text" placeholder="Hex" wire:model="hex" class="bg-zinc-800 rounded" required/>
+                <button type="submit" class="bg-green-500 hover:bg-green-700 text-zinc-800 hover:text-white font-bold py-2 px-4 rounded cursor-pointer">Submit</button>
+            </div>
+        </form>
+    </div>
+
+    <div class="container m-auto my-8 bg-zinc-700">
+        <table class="w-full">
+            <thead class="bg-zinc-900">
+                <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></th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach ($colors as $color)
+                    <tr wire:key="{{ $color->id }}" class="border-b border-zinc-600 hover:bg-zinc-600 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"><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>
+</section>
@@ -0,0 +1,3 @@
+<div>
+    {{-- In work, do what you enjoy. --}}
+</div>