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');
+    }
+}