fixed Database Error while creating new color

app/Livewire/Filament/Color.php

@@ -22,17 +22,27 @@ class Color extends Component
     #[Validate('required')]
     public $hex = '';
 
+    public $createModal = false;
+
     public function create() {
+        @Auth::check();
+
+
         // Validate
         $this->validate(); 
 
-        // Create the color 
+        $color = new ColorModel();
-        ColorModel::create([
+        $color->name = $this->name;
-            $this->all()
+        $color->hex = $this->hex;
-        ]);
+        $color->save();
+
+        session()->flash('status', 'Color successfully created.');
 
         // Clear the form
         $this->reset(['name', 'hex']);
+
+        // Close the modal
+        $this->createModal = false;
     }
 
     public function delete(Color $color) {

resources/views/components/modal.blade.php

@@ -9,7 +9,9 @@ $maxWidth = [
     'lg' => 'sm:max-w-lg',
     'xl' => 'sm:max-w-xl',
     '2xl' => 'sm:max-w-2xl',
-][$maxWidth ?? '2xl'];
+    '3xl' => 'sm:max-w-3xl',
+    '4xl' => 'sm:max-w-4xl',
+][$maxWidth ?? '4xl'];
 @endphp
 
 <div
@@ -27,10 +29,10 @@ $maxWidth = [
                     x-transition:leave="ease-in duration-200"
                     x-transition:leave-start="opacity-100"
                     x-transition:leave-end="opacity-0">
-        <div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
+        <div class="absolute inset-0 bg-zinc-500 dark:bg-zinc-900 opacity-75"></div>
     </div>
 
-    <div x-show="show" class="mb-6 bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
+    <div x-show="show" class="mb-6 bg-white dark:bg-zinc-800 rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
                     x-trap.inert.noscroll="show"
                     x-transition:enter="ease-out duration-300"
                     x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"

resources/views/livewire/filament/color.blade.php

@@ -4,22 +4,12 @@
 
         <x-slot name="headerright">
             <a href="#" class="flex gap-2 hover:*:animate-spin"><flux:icon.arrow-path class="transition ease-in duration-300" />Refresh</a>
-            <a href="#" class="bg-zinc-500 hover:bg-green-500 text-zinc-50 hover:text-zinc-700 font-bold text-base py-2 px-4 rounded cursor-pointer">Create</a>
+            <button type="button" x-on:click="$wire.createModal = true" class="bg-zinc-500 hover:bg-green-500 text-zinc-50 hover:text-zinc-700 font-bold text-base py-2 px-4 rounded cursor-pointer">Create</button>
         </x-slot>
     </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">
@@ -46,4 +36,29 @@
             {{ $colors->links() }}
         </div>
     </div>
+
+    <!-- Create Form -->
+
+    <x-modal wire:model="createModal" >
+        <div class="flex justify-center flex-col">
+            <div class="flex justify-end">
+                <button wire:click="$set('createModal', false)" class="text-accent p-2 m-2 cursor-pointer rounded-full bg-zinc-800 absolute"><flux:icon.x-mark class="size-6"/></button>
+            </div>
+            <div class="bg-zinc-700">
+                <h3 class="text-2xl content-cente p-8 text-center border-b border-zinc-600">New Color</h3>
+            </div>
+            <div class="py-8 px-8">
+                <form class="flex flex-col gap-4" wire:submit="create">
+                    <div class="flex justify-center gap-8 flex-col">
+                        <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>
+    </x-modal>
+
 </section>