63 lines
1.8 KiB
PHP
63 lines
1.8 KiB
PHP
<?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');
|
|
}
|
|
}
|