updated filaments.index

resources/views/filaments/index.blade.php

@@ -12,16 +12,35 @@
   <div class="py-12">
       <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
           <div class="bg-white dark:bg-zinc-700 overflow-hidden shadow-xl sm:rounded-lg">
-            <ul class="">
+            <table class="table-auto w-full">
-              <li class="flex gap-6  bg-zinc-50 dark:bg-zinc-900 p-2 px-4"><div class="">ID</div><div class="">Name</div><div class="">Options</div></li>
+              <thead class="bg-zinc-900 border-b border-rose-500">
+                <tr>
+                  <th class="py-6 px-4 flex justify-start">Name</th>
+                  <th class="py-6">Color</th>
+                  <th class="py-6">Weight</th>
+                  <th class="py-6">Diameter</th>
+                  <th class="py-6">Price</th>
+                  <th class="py-6">Stock</th>
+                  <th class="py-6">Edit</th>
+                  <th class="py-6">Delete</th>
+                </tr>
+              </thead>
+              <tbody>
                 @foreach ($filaments as $filament)
-                <li class="flex gap-6 py-3 px-4 items-center">  
+                  <tr class="border-b border-zinc-600">
-                  <div class="p-2">{{ $filament->id }}</div>
+                    <td class="text-center py-4"><a href="/filaments/{{ $filament->id }}" class="flex justify-start px-4">{{ $filament->name }}</a></td>
-                  <div class="p-2"><a href="/filaments/{{ $filament->id }}">{{ $filament->name }}</a></div>
+                    <td class="text-center py-4"><a href="/filaments/{{ $filament->id }}" class="flex justify-center px-4 gap-2"><div class="w-8 h-8 rounded" style="background-color: {{ $filament->color->hex }}"></div>{{ $filament->color->name }}</a></td>
-                  <div class="px-2"><a href="{{ route('filaments.edit', $filament->id) }}"><flux:icon.ellipsis class="hover:text-zinc-50 hover:bg-zinc-500 stroke-3 rounded "/></a></div>
+                    <td class="text-center py-4"><a href="/filaments/{{ $filament->id }}" class="flex justify-center px-4">{{ $filament->weight }} g</a></td>
-                </li>
+                    <td class="text-center py-4"><a href="/filaments/{{ $filament->id }}" class="flex justify-center px-4">{{ $filament->diameter }} mm</a></td>
+                    <td class="text-center py-4"><a href="/filaments/{{ $filament->id }}" class="flex justify-center px-4">@isset($filament->price) {{ $filament->price }}<flux:icon.euro /> @endisset</a></td>
+                    <td class="text-center py-4"><a href="/filaments/{{ $filament->id }}" class="bg-accent px-2 py-1 rounded">{{ $filament->stock }}</a></td>
+                    <td class="text-center py-4"><a href="{{ route('filaments.edit', $filament->id) }}" class="flex justify-center"><flux:icon.ellipsis class="hover:text-zinc-50 hover:bg-zinc-500 stroke-3 rounded "/></a></td>
+                    <td class="text-center py-4"><a href="{{ route('filaments.edit', $filament->id) }}" class="flex justify-center"><flux:icon.x-mark class="hover:text-zinc-50 hover:bg-zinc-500 stroke-3 rounded "/></a></td>
+                    
+                  </tr>
                 @endforeach
-            </ul>
+              </tbody>
+            </table>
             
           </div>
       </div>

resources/views/flux/icon/euro.blade.php

@@ -0,0 +1,43 @@
+{{-- Credit: Lucide (https://lucide.dev) --}}
+
+@props([
+    'variant' => 'outline',
+])
+
+@php
+if ($variant === 'solid') {
+    throw new \Exception('The "solid" variant is not supported in Lucide.');
+}
+
+$classes = Flux::classes('shrink-0')
+    ->add(match($variant) {
+        'outline' => '[:where(&)]:size-6',
+        'solid' => '[:where(&)]:size-6',
+        'mini' => '[:where(&)]:size-5',
+        'micro' => '[:where(&)]:size-4',
+    });
+
+$strokeWidth = match ($variant) {
+    'outline' => 2,
+    'mini' => 2.25,
+    'micro' => 2.5,
+};
+@endphp
+
+<svg
+    {{ $attributes->class($classes) }}
+    data-flux-icon
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="{{ $strokeWidth }}"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    data-slot="icon"
+>
+  <path d="M4 10h12" />
+  <path d="M4 14h9" />
+  <path d="M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2" />
+</svg>