42 lines
1.6 KiB
PHP
42 lines
1.6 KiB
PHP
@props([
|
|
'variant' => 'info', // primary, secondary, success, danger, warning, info, ghost
|
|
'size' => 'md', // sm, md
|
|
'icon' => null,
|
|
])
|
|
|
|
@php
|
|
$baseClasses = 'inline-flex items-center gap-1.5 font-semibold text-[11px] tracking-wide px-2.5 py-1 rounded-full border transition-colors duration-150 whitespace-nowrap';
|
|
|
|
$variants = [
|
|
'blue' => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
|
|
'primary' => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
|
|
'info' => 'text-[#4b82f7] bg-[rgba(75,130,247,0.12)] border-[rgba(75,130,247,0.35)]',
|
|
'red' => 'text-[#ef4a5f] bg-[rgba(239,74,95,0.1)] border-[rgba(239,74,95,0.32)]',
|
|
'danger' => 'text-[#ef4a5f] bg-[rgba(239,74,95,0.1)] border-[rgba(239,74,95,0.32)]',
|
|
'success' => 'text-[#21c274] bg-[rgba(33,194,116,0.12)] border-[rgba(33,194,116,0.35)]',
|
|
'warning' => 'text-[#f0a939] bg-[rgba(240,169,57,0.12)] border-[rgba(240,169,57,0.35)]',
|
|
'secondary' => 'text-slate-400 bg-[#0d1220] border-[#232b3d]',
|
|
'ghost' => 'text-slate-400 bg-[#0d1220] border-[#232b3d]',
|
|
];
|
|
|
|
$sizes = [
|
|
'sm' => 'px-2 py-0.5 text-[10.5px]',
|
|
'md' => 'px-2.5 py-1 text-[11px]',
|
|
];
|
|
|
|
$classes = implode(' ', [
|
|
$baseClasses,
|
|
$variants[$variant] ?? $variants['ghost'],
|
|
$sizes[$size] ?? $sizes['md'],
|
|
]);
|
|
@endphp
|
|
|
|
<span {{ $attributes->merge(['class' => $classes]) }}>
|
|
@if($icon)
|
|
<i class="{{ $icon }}"></i>
|
|
@endif
|
|
@if(trim($slot))
|
|
<span>{{ $slot }}</span>
|
|
@endif
|
|
</span>
|