From 4c775a1d70c1eb362fbcd44ff15632931f2ac722 Mon Sep 17 00:00:00 2001
From: iridium34 <abstergodevelopment@gmail.com>
Date: Sat, 15 Mar 2025 03:01:59 +0100
Subject: [PATCH] Changed colors.index to Livewire

---
 app/Livewire/Color/Index.php                  | 46 ++++++++++
 app/Livewire/Dashboard.php                    |  2 +
 resources/views/components/footer.blade.php   |  5 ++
 resources/views/components/header.blade.php   |  6 +-
 .../views/components/layouts/app.blade.php    | 23 ++++-
 .../views/livewire/color/index.blade.php      | 43 ++++++++++
 resources/views/livewire/dashboard.blade.php  | 84 +++++++++----------
 routes/web.php                                |  6 +-
 8 files changed, 162 insertions(+), 53 deletions(-)
 create mode 100644 app/Livewire/Color/Index.php
 create mode 100644 resources/views/components/footer.blade.php
 create mode 100644 resources/views/livewire/color/index.blade.php

diff --git a/app/Livewire/Color/Index.php b/app/Livewire/Color/Index.php
new file mode 100644
index 0000000..9d7f4b8
--- /dev/null
+++ b/app/Livewire/Color/Index.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Livewire\Color;
+
+use Livewire\WithPagination;
+use Livewire\Attributes\Validate;
+use Livewire\Component;
+use Livewire\Attributes\title;
+use Illuminate\Support\Facades\Auth;
+
+use App\Models\Color;
+#[title('Colors')]
+class Index extends Component
+{
+    use WithPagination;
+
+    #[Validate('required')]
+    public $name = '';
+
+    #[Validate('required')]
+    public $hex = '';
+
+    public function create() {
+        // Validate
+        $this->validate(); 
+
+        // Create the color 
+        Color::create([
+            $this->all()
+        ]);
+
+        // Clear the form
+        $this->reset(['name', 'hex']);
+    }
+
+    public function delete(Color $color) {
+        @Auth::check();
+        $color->delete();
+    }
+    public function render()
+    {
+        return view('livewire.color.index', [
+            'colors' => Color::paginate(10)
+        ]);
+    }
+}
diff --git a/app/Livewire/Dashboard.php b/app/Livewire/Dashboard.php
index 72b15ab..22b6318 100644
--- a/app/Livewire/Dashboard.php
+++ b/app/Livewire/Dashboard.php
@@ -4,7 +4,9 @@ namespace App\Livewire;
 
 use Livewire\Component;
 use App\Models\Manufacturer;
+use Livewire\Attributes\title;
 
+#[title('Dashboard')]
 class Dashboard extends Component
 {
     public function render()
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
new file mode 100644
index 0000000..c0d846c
--- /dev/null
+++ b/resources/views/components/footer.blade.php
@@ -0,0 +1,5 @@
+<section>
+  <div class="container mx-auto text-center py-8 text-zinc-500">
+    <p>Copyright 2025 {{ config('app.name') }}</p>
+  </div>
+</section>
\ No newline at end of file
diff --git a/resources/views/components/header.blade.php b/resources/views/components/header.blade.php
index 75b0699..20ec7b1 100644
--- a/resources/views/components/header.blade.php
+++ b/resources/views/components/header.blade.php
@@ -1,5 +1,7 @@
-  <div class="py-6 px-4 sm:px-6 lg:px-8">
+<div class="bg-zinc-700 w-full border-b border-accent">
+  <div class="container mx-auto py-6 px-4 sm:px-6 lg:px-8">
     <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
       {{ $slot }}
     </h2>
-  </div>
\ No newline at end of file
+  </div>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
index 68ba638..06ff78e 100644
--- a/resources/views/components/layouts/app.blade.php
+++ b/resources/views/components/layouts/app.blade.php
@@ -4,9 +4,28 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-        <title>{{ $title ?? 'Page Title' }}</title>
+        <!-- Fonts -->
+        <link rel="preconnect" href="https://fonts.bunny.net">
+        <link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" />
+        
+        <!-- Scripts -->
+        @vite(['resources/css/app.css', 'resources/js/app.js'])
+
+        <!-- Styles -->
+        @livewireStyles
+        @fluxAppearance
+
+        <title>{{ $title . ' | ' . config('app.name') ?? config('app.name') }}</title>
     </head>
-    <body>
+    <body class="font-sans antialiased bg-zinc-800">
+        <x-navbar />
+        
         {{ $slot }}
+        
+        <x-footer />
+        
+        @livewireScripts
+        @fluxScripts
+
     </body>
 </html>
diff --git a/resources/views/livewire/color/index.blade.php b/resources/views/livewire/color/index.blade.php
new file mode 100644
index 0000000..ba58d27
--- /dev/null
+++ b/resources/views/livewire/color/index.blade.php
@@ -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>
\ No newline at end of file
diff --git a/resources/views/livewire/dashboard.blade.php b/resources/views/livewire/dashboard.blade.php
index 2dce8f0..1383391 100644
--- a/resources/views/livewire/dashboard.blade.php
+++ b/resources/views/livewire/dashboard.blade.php
@@ -1,49 +1,41 @@
 <div>
-    <x-app-layout>
-        <x-slot name="header">
-                {{ __('Dashboard') }}
-        </x-slot>
-    
-    
-        <div class="py-12">
-            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
-
-                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                    <div class="col-span-2">
-                      <x-card>
-                        <h3>
-                          Manufacturers
-                        </h3>
-                        @foreach ($manufacturers as  $manufacturer)
-                          {{ $manufacturer->name }}
-                          {{ $manufacturer->filament_count }}
-                        @endforeach
-                      </x-card>
-                    </div>
-                    <div class="col-span-1">
-                      <x-card>
-                        <h3>
-                          Filaments
-                        </h3>
-                      </x-card>
-                    </div>
-                    <div class="col-span-1">
-                      <x-card>
-                        <h3>
-                          Types
-                        </h3>
-                      </x-card>
-                    </div>
-                    <div class="col-span-2">
-                      <x-card>
-                        <h3>
-                          Colors
-                        </h3>
-                      </x-card>
-                    </div>
-                  </div>
-
-            </div>
+  <div class="py-12">
+      <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div class="col-span-2">
+            <x-card>
+              <h3>
+                Manufacturers
+              </h3>
+              @foreach ($manufacturers as  $manufacturer)
+                {{ $manufacturer->name }}
+                {{ $manufacturer->filament_count }}
+              @endforeach
+            </x-card>
+          </div>
+          <div class="col-span-1">
+            <x-card>
+              <h3>
+                Filaments
+              </h3>
+            </x-card>
+          </div>
+          <div class="col-span-1">
+            <x-card>
+              <h3>
+                Types
+              </h3>
+            </x-card>
+          </div>
+          <div class="col-span-2">
+            <x-card>
+              <h3>
+                Colors
+              </h3>
+            </x-card>
+          </div>
         </div>
-    </x-app-layout>
+      </div>
+  </div>
+
 </div>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index e0bf85f..65a6c33 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -7,6 +7,7 @@ use App\Http\Controllers\FilamentController;
 use App\Http\Controllers\ManufacturerController;
 
 use App\Livewire\Dashboard;
+use App\Livewire\Color\Index;
 
 Route::get('/', function () {
     return view('welcome');
@@ -22,12 +23,11 @@ Route::middleware([
     Route::get('/', Dashboard::class)->name('dashboard');
     // Filament Types
     Route::resource('types', FilamentTypeController::class);
-    // Colors
-    Route::resource('colors', ColorController::class);
     // Filaments
     Route::resource('filaments', FilamentController::class);
     // Manufacturers
     Route::resource('manufacturers', ManufacturerController::class);
     Route::get('refresh', [ManufacturerController::class, 'refresh'])->name('refresh');
-    
+   
+    Route::get('colors', Index::class)->name('colors.index');
 });