2021-12-24 09:49:34 +00:00
|
|
|
<?php
|
|
|
|
|
|
|
|
|
|
declare(strict_types=1);
|
|
|
|
|
|
|
|
|
|
namespace App\Views\Components;
|
|
|
|
|
|
2024-05-29 10:24:13 +00:00
|
|
|
use Override;
|
2021-12-24 09:49:34 +00:00
|
|
|
use ViewComponents\Component;
|
|
|
|
|
|
|
|
|
|
class Pill extends Component
|
|
|
|
|
{
|
2024-12-15 17:34:36 +00:00
|
|
|
protected array $props = ['size', 'variant', 'icon', 'iconClass', 'hint'];
|
|
|
|
|
|
2021-12-24 09:49:34 +00:00
|
|
|
/**
|
|
|
|
|
* @var 'small'|'base'
|
|
|
|
|
*/
|
2024-12-15 17:34:36 +00:00
|
|
|
protected string $size = 'base';
|
2021-12-24 09:49:34 +00:00
|
|
|
|
2024-12-15 17:34:36 +00:00
|
|
|
protected string $variant = 'default';
|
2021-12-24 09:49:34 +00:00
|
|
|
|
2024-12-15 17:34:36 +00:00
|
|
|
protected string $icon = '';
|
2021-12-24 09:49:34 +00:00
|
|
|
|
2024-12-15 17:34:36 +00:00
|
|
|
protected string $iconClass = '';
|
2024-05-09 17:55:41 +00:00
|
|
|
|
|
|
|
|
protected string $hint = '';
|
2021-12-24 17:55:56 +00:00
|
|
|
|
2024-05-29 10:24:13 +00:00
|
|
|
#[Override]
|
2021-12-24 09:49:34 +00:00
|
|
|
public function render(): string
|
|
|
|
|
{
|
2024-05-09 17:55:41 +00:00
|
|
|
$variantClass = match ($this->variant) {
|
2021-12-24 09:49:34 +00:00
|
|
|
'primary' => 'text-accent-contrast bg-accent-base border-accent-base',
|
2021-12-23 16:56:06 +00:00
|
|
|
'success' => 'text-pine-900 bg-pine-100 border-pine-300',
|
2023-06-12 14:47:38 +00:00
|
|
|
'danger' => 'text-red-900 bg-red-100 border-red-300',
|
2021-12-24 09:49:34 +00:00
|
|
|
'warning' => 'text-yellow-900 bg-yellow-100 border-yellow-300',
|
2024-05-09 17:55:41 +00:00
|
|
|
default => 'text-gray-800 bg-gray-100 border-gray-300',
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$sizeClass = match ($this->size) {
|
|
|
|
|
'small' => 'text-xs tracking-wide',
|
|
|
|
|
default => 'text-sm',
|
|
|
|
|
};
|
2021-12-24 09:49:34 +00:00
|
|
|
|
2024-05-09 17:55:41 +00:00
|
|
|
$icon = $this->icon !== '' ? icon($this->icon, [
|
2024-04-26 17:57:25 +00:00
|
|
|
'class' => $this->iconClass,
|
|
|
|
|
]) : '';
|
2024-05-09 17:55:41 +00:00
|
|
|
|
|
|
|
|
if ($this->hint !== '') {
|
|
|
|
|
$this->attributes['data-tooltip'] = 'bottom';
|
|
|
|
|
$this->attributes['title'] = $this->hint;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
$this->mergeClass('inline-flex lowercase items-center gap-x-1 px-1 font-semibold border rounded');
|
|
|
|
|
$this->mergeClass($variantClass);
|
|
|
|
|
$this->mergeClass($sizeClass);
|
2021-12-24 09:49:34 +00:00
|
|
|
|
|
|
|
|
return <<<HTML
|
2024-05-09 17:55:41 +00:00
|
|
|
<span {$this->getStringifiedAttributes()}>{$icon}{$this->slot}</span>
|
2021-12-24 09:49:34 +00:00
|
|
|
HTML;
|
|
|
|
|
}
|
|
|
|
|
}
|
