added button component

app/View/Components/Button.php

@@ -0,0 +1,62 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\View\Components;
+
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class Button extends Component
+{
+    public const VARIANT_PRIMARY = 'primary';
+    public const VARIANT_SECONDARY = 'secondary';
+    public const VARIANT_OUTLINE = 'outline';
+
+    public function __construct(public string $variant = self::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';
+
+        $classes = match ($this->variant) {
+            self::VARIANT_SECONDARY => [
+                'base' => 'bg-secondary text-text',
+                'hover' => 'hover:bg-secondary-dark',
+                'disabled' => 'disabled:bg-secondary',
+            ],
+            self::VARIANT_OUTLINE => [
+                'base' => 'bg-surface border border-primary text-primary',
+                'hover' => 'hover:bg-primary hover:text-text-inverted',
+                'disabled' => 'disabled:bg-surface disabled:text-primary',
+            ],
+            default => [
+                'base' => 'bg-primary text-text-inverted',
+                'hover' => 'hover:bg-primary-dark',
+                'disabled' => 'disabled:bg-primary'
+            ]
+        };
+
+        $baseDisabled = 'disabled:cursor-not-allowed disabled:opacity-60';
+
+        return trim(
+            $base . ' ' .
+            $classes['base'] . ' ' .
+            $classes['hover'] . ' ' .
+            $baseDisabled . ' ' .
+            $classes['disabled']
+        );
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View
+    {
+        return view('components.button');
+    }
+}