2021-08-19 14:00:14 +00:00
|
|
|
<?php
|
|
|
|
|
|
|
|
|
|
declare(strict_types=1);
|
|
|
|
|
|
2021-09-02 16:34:25 +00:00
|
|
|
namespace App\Views\Components;
|
2021-08-19 14:00:14 +00:00
|
|
|
|
2024-05-29 10:24:13 +00:00
|
|
|
use Override;
|
2021-08-19 14:00:14 +00:00
|
|
|
use ViewComponents\Component;
|
|
|
|
|
|
|
|
|
|
class Button extends Component
|
|
|
|
|
{
|
2024-05-09 17:55:41 +00:00
|
|
|
protected array $props = ['uri', 'variant', 'size', 'iconLeft', 'iconRight', 'isSquared', 'isExternal'];
|
|
|
|
|
|
|
|
|
|
protected array $casts = [
|
|
|
|
|
'isSquared' => 'boolean',
|
|
|
|
|
'isExternal' => 'boolean',
|
|
|
|
|
];
|
|
|
|
|
|
2021-08-19 14:00:14 +00:00
|
|
|
protected string $uri = '';
|
|
|
|
|
|
|
|
|
|
protected string $variant = 'default';
|
|
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
/**
|
|
|
|
|
* @var 'small'|'base'|'large'
|
|
|
|
|
*/
|
2021-08-19 14:00:14 +00:00
|
|
|
protected string $size = 'base';
|
|
|
|
|
|
|
|
|
|
protected string $iconLeft = '';
|
|
|
|
|
|
|
|
|
|
protected string $iconRight = '';
|
|
|
|
|
|
|
|
|
|
protected bool $isSquared = false;
|
|
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
protected bool $isExternal = false;
|
2021-09-15 15:58:21 +00:00
|
|
|
|
2024-05-29 10:24:13 +00:00
|
|
|
#[Override]
|
2021-08-19 14:00:14 +00:00
|
|
|
public function render(): string
|
|
|
|
|
{
|
2024-05-10 09:06:10 +00:00
|
|
|
$this->mergeClass('shadow gap-x-2 flex-shrink-0 inline-flex items-center justify-center font-semibold rounded-full');
|
2021-08-19 14:00:14 +00:00
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
$variantClass = match ($this->variant) {
|
2024-05-10 09:06:10 +00:00
|
|
|
'primary' => 'text-accent-contrast bg-accent-base hover:bg-accent-hover',
|
|
|
|
|
'secondary' => 'ring-2 ring-accent-base ring-inset text-accent-base bg-white hover:border-accent-hover hover:text-accent-hover hover:ring-accent-hover',
|
|
|
|
|
'danger' => 'bg-red-50 ring-2 ring-red-700 ring-inset text-red-700 hover:ring-red-800 hover:text-red-800',
|
|
|
|
|
'warning' => 'bg-yellow-50 ring-2 ring-yellow-700 ring-inset text-yellow-700 hover:ring-yellow-800 hover:text-yellow-800',
|
|
|
|
|
'info' => 'bg-blue-50 ring-2 ring-blue-700 ring-inset text-blue-700 hover:ring-blue-800 hover:text-blue-800',
|
|
|
|
|
'disabled' => 'text-black bg-gray-300 cursor-not-allowed',
|
|
|
|
|
default => 'text-black bg-gray-50 hover:bg-gray-200',
|
2024-05-09 17:55:41 +00:00
|
|
|
};
|
2021-08-19 14:00:14 +00:00
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
$sizeClass = match ($this->size) {
|
2021-09-21 15:51:04 +00:00
|
|
|
'small' => 'text-xs leading-6',
|
|
|
|
|
'large' => 'text-base leading-6',
|
2024-05-09 17:55:41 +00:00
|
|
|
default => 'text-sm leading-5',
|
|
|
|
|
};
|
2021-08-19 14:00:14 +00:00
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
$iconSizeClass = match ($this->size) {
|
2022-01-13 16:02:14 +00:00
|
|
|
'small' => 'text-sm',
|
|
|
|
|
'large' => 'text-2xl',
|
2024-05-09 17:55:41 +00:00
|
|
|
default => 'text-lg',
|
|
|
|
|
};
|
2022-01-13 16:02:14 +00:00
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
$basePaddings = match ($this->size) {
|
2021-10-13 15:43:40 +00:00
|
|
|
'small' => 'px-3 py-1',
|
2021-09-21 15:51:04 +00:00
|
|
|
'large' => 'px-4 py-2',
|
2024-05-09 17:55:41 +00:00
|
|
|
default => 'px-3 py-2',
|
|
|
|
|
};
|
2021-08-19 14:00:14 +00:00
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
$squaredPaddings = match ($this->size) {
|
2021-08-19 14:00:14 +00:00
|
|
|
'small' => 'p-1',
|
|
|
|
|
'large' => 'p-3',
|
2024-05-09 17:55:41 +00:00
|
|
|
default => 'p-2',
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$this->mergeClass($variantClass);
|
|
|
|
|
$this->mergeClass($sizeClass);
|
|
|
|
|
|
|
|
|
|
if ($this->isSquared) {
|
|
|
|
|
$this->mergeClass($squaredPaddings);
|
|
|
|
|
} else {
|
|
|
|
|
$this->mergeClass($basePaddings);
|
2021-08-19 14:00:14 +00:00
|
|
|
}
|
|
|
|
|
|
2023-07-29 09:57:35 +00:00
|
|
|
if ($this->iconLeft !== '' || $this->iconRight !== '') {
|
|
|
|
|
$this->slot = '<span>' . $this->slot . '</span>';
|
|
|
|
|
}
|
|
|
|
|
|
2021-08-19 14:00:14 +00:00
|
|
|
if ($this->iconLeft !== '') {
|
2024-04-26 17:57:25 +00:00
|
|
|
$this->slot = icon($this->iconLeft, [
|
2024-05-09 17:55:41 +00:00
|
|
|
'class' => 'opacity-75 ' . $iconSizeClass,
|
2024-04-26 17:57:25 +00:00
|
|
|
]) . $this->slot;
|
2021-08-19 14:00:14 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if ($this->iconRight !== '') {
|
2024-04-26 17:57:25 +00:00
|
|
|
$this->slot .= icon($this->iconRight, [
|
2024-05-09 17:55:41 +00:00
|
|
|
'class' => 'opacity-75 ' . $iconSizeClass,
|
2024-04-26 17:57:25 +00:00
|
|
|
]);
|
2021-08-19 14:00:14 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if ($this->uri !== '') {
|
2021-09-15 15:58:21 +00:00
|
|
|
$tagName = 'a';
|
2024-05-09 17:55:41 +00:00
|
|
|
$this->attributes['href'] = $this->uri;
|
|
|
|
|
if ($this->isExternal) {
|
|
|
|
|
$this->attributes['target'] = '_blank';
|
|
|
|
|
$this->attributes['rel'] = 'noopener noreferrer';
|
|
|
|
|
}
|
2021-09-15 15:58:21 +00:00
|
|
|
} else {
|
|
|
|
|
$tagName = 'button';
|
2024-05-09 17:55:41 +00:00
|
|
|
$this->attributes['type'] ??= 'button';
|
2021-08-19 14:00:14 +00:00
|
|
|
}
|
|
|
|
|
|
2021-08-27 10:58:22 +00:00
|
|
|
return <<<HTML
|
2024-05-09 17:55:41 +00:00
|
|
|
<{$tagName} {$this->getStringifiedAttributes()}>{$this->slot}</{$tagName}>
|
2021-08-27 10:58:22 +00:00
|
|
|
HTML;
|
2021-08-19 14:00:14 +00:00
|
|
|
}
|
|
|
|
|
}
|
