WIP: added button component

improve disabled and hover states

app/View/Components/Button.php

@@ -0,0 +1,43 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Button extends Component
+{
+
+    public function __construct(public string $variant = 'primary', public bool $disabled = false)
+    {
+        //
+    }
+
+    public function classes(): string
+    {
+        $base = 'inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out';
+
+        $variants = [
+            'primary' => 'bg-primary text-text-inverted hover:bg-blue-700',
+            'secondary' => 'bg-secondary text-text hover:bg-gray-300',
+            'outline' => 'border border-primary text-primary hover:bg-red-700',
+        ];
+
+        $disabled = 'disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:opacity-60';
+
+        return trim(
+            $base . ' ' .
+            ($variants[$this->variant] ?? $variants['primary']) . ' ' .
+            $disabled
+        );
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.button');
+    }
+}

resources/views/components/button.blade.php

@@ -0,0 +1,8 @@
+<button 
+    {{ $attributes
+        ->merge(['class' => $classes()])
+        ->merge(['disabled' => $disabled])
+    }}
+>
+    {{ $slot }}
+</button>

resources/views/storybook/index.blade.php

@@ -27,33 +27,29 @@
             <h3 class="text-l font-semibold">Enabled</h3>
 
             <div class="flex gap-4">
-                <button class="bg-primary text-text-inverted px-4 py-2 rounded">
-                    Primary
-                </button>
+                <x-button>Default</x-button>
 
-                <button class="bg-secondary text-black px-4 py-2 rounded">
-                    Secondary
-                </button>
+                <x-button variant="primary">Primary</x-button>
 
-                <button class="border border-primary text-primary px-4 py-2 rounded">
-                    Outline
-                </button>
+
+                <x-button variant="secondary">Secondary</x-button>
+
+
+                <x-button variant="outline">Outline</x-button>
             </div>
 
             <h3 class="text-l font-semibold">Disabled</h3>
 
             <div class="flex gap-4">
-                <button class="bg-primary text-text-inverted px-4 py-2 rounded" disabled>
-                    Primary
-                </button>
+                <x-button disabled>Default</x-button>
 
-                <button class="bg-secondary text-black px-4 py-2 rounded" disabled>
-                    Secondary
-                </button>
+                <x-button variant="primary" disabled>Primary</x-button>
 
-                <button class="border border-primary text-primary px-4 py-2 rounded" disabled>
-                    Outline
-                </button>
+
+                <x-button variant="secondary" disabled>Secondary</x-button>
+
+
+                <x-button variant="outline" disabled>Outline</x-button>
             </div>
         </section>