WIP: added button component

add tests

app/View/Components/Button.php

@@ -16,20 +16,35 @@ class Button extends Component
 
     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';
+        $base = 'inline-flex items-center justify-center px-4 py-2 rounded-md text-sm font-medium transition ' .
+            'duration-150 ease-in-out';
 
-        $variants = [
+        $classes = match ($this->variant) {
-            'primary' => 'bg-primary text-text-inverted hover:bg-blue-700',
+            'secondary' => [
-            'secondary' => 'bg-secondary text-text hover:bg-gray-300',
+                'base' => 'bg-secondary text-text',
-            'outline' => 'border border-primary text-primary hover:bg-red-700',
+                'hover' => 'hover:bg-secondary-dark',
-        ];
+                'disabled' => 'disabled:bg-secondary',
+            ],
+            'outline' => [
+                'base' => 'bg-outline border border-primary text-primary',
+                'hover' => 'hover:bg-primary hover:text-text-inverted',
+                'disabled' => 'disabled:bg-outline disabled:text-primary',
+            ],
+            default => [
+                'base' => 'bg-primary text-text-inverted',
+                'hover' => 'hover:bg-primary-dark',
+                'disabled' => 'disabled:bg-primary'
+            ]
+        };
 
-        $disabled = 'disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:opacity-60';
+        $baseDisabled = 'disabled:cursor-not-allowed disabled:opacity-60';
 
         return trim(
             $base . ' ' .
-            ($variants[$this->variant] ?? $variants['primary']) . ' ' .
+            $classes['base'] . ' ' .
-            $disabled
+            $classes['hover'] . ' ' .
+            $baseDisabled . ' ' .
+            $classes['disabled']
         );
     }
 

resources/css/app.css

@@ -19,6 +19,9 @@
     --color-secondary-light: #FCD34D;
     --color-secondary-dark: #B45309;
 
+    /* OUTLINE */
+    --color-outline: rgba(0, 0, 0 ,0);
+
     /* BACKGROUND */
     --color-background: #F8FAFC;
     --color-background-dark: #E2E8F0;