{{--
ShiftBridge Badge Component
Usage:
Default
Online
Offline
Warning
Info
Critical
Primary
Secondary
Success
Danger
Small
Medium
With Dot
With Icon
Closable
Pill Shape
Outlined
Props:
- variant: string (default, primary, secondary, success, danger, warning, info, online, offline, critical)
- size: string (sm, md)
- dot: boolean (show status dot)
- dotColor: string (override dot color)
- icon: string (Lucide icon name)
- closable: boolean (show close button)
- pill: boolean (pill/rounded-full shape)
- outlined: boolean (outlined style)
- href: string (render as anchor tag)
--}}
@props([
'variant' => 'default',
'size' => 'md',
'dot' => false,
'dotColor' => null,
'icon' => null,
'closable' => false,
'pill' => false,
'outlined' => false,
'href' => null,
])
@php
// Size classes
$sizeClasses = match($size) {
'sm' => 'px-2 py-0.5 text-xs gap-1',
'md' => 'px-2.5 py-1 text-sm gap-1.5',
default => 'px-2.5 py-1 text-sm gap-1.5',
};
// Icon size based on badge size
$iconSize = match($size) {
'sm' => 'w-3 h-3',
'md' => 'w-3.5 h-3.5',
default => 'w-3.5 h-3.5',
};
// Dot size based on badge size
$dotSize = match($size) {
'sm' => 'w-1.5 h-1.5',
'md' => 'w-2 h-2',
default => 'w-2 h-2',
};
// Shape classes
$shapeClasses = $pill ? 'rounded-full' : 'rounded-md';
// Variant classes
if ($outlined) {
$variantClasses = match($variant) {
'primary' => 'border border-[var(--sb-primary)] text-[var(--sb-primary)] bg-transparent',
'secondary' => 'border border-[var(--sb-text-secondary)] text-[var(--sb-text-secondary)] bg-transparent',
'success', 'online' => 'border border-[var(--sb-success)] text-[var(--sb-success)] bg-transparent',
'danger', 'offline', 'critical' => 'border border-[var(--sb-danger)] text-[var(--sb-danger)] bg-transparent',
'warning' => 'border border-[var(--sb-warning)] text-[var(--sb-warning)] bg-transparent',
'info' => 'border border-[var(--sb-info)] text-[var(--sb-info)] bg-transparent',
default => 'border border-[var(--sb-border)] text-[var(--sb-text-secondary)] bg-transparent',
};
} else {
$variantClasses = match($variant) {
'primary' => 'bg-[var(--sb-primary)]/10 text-[var(--sb-primary)]',
'secondary' => 'bg-slate-100 text-slate-600',
'success' => 'bg-[var(--sb-success-bg)] text-[var(--sb-success)]',
'online' => 'bg-[var(--sb-status-online-bg)] text-[var(--sb-status-online-text)]',
'danger' => 'bg-[var(--sb-danger-bg)] text-[var(--sb-danger)]',
'offline' => 'bg-[var(--sb-status-offline-bg)] text-[var(--sb-status-offline-text)]',
'warning' => 'bg-[var(--sb-warning-bg)] text-[var(--sb-warning)]',
'info' => 'bg-[var(--sb-info-bg)] text-[var(--sb-info)]',
'critical' => 'bg-[var(--sb-status-critical-bg)] text-[var(--sb-status-critical-text)]',
default => 'bg-[var(--sb-card-header-bg)] text-[var(--sb-text-secondary)] border border-[var(--sb-border)]',
};
}
// Dot color
$dotColorClass = $dotColor ?: match($variant) {
'primary' => 'bg-[var(--sb-primary)]',
'secondary' => 'bg-slate-500',
'success', 'online' => 'bg-[var(--sb-success)]',
'danger', 'offline' => 'bg-[var(--sb-danger)]',
'warning' => 'bg-[var(--sb-warning)]',
'info' => 'bg-[var(--sb-info)]',
'critical' => 'bg-[var(--sb-danger)]',
default => 'bg-[var(--sb-text-secondary)]',
};
// Base classes
$baseClasses = 'inline-flex items-center font-medium transition-colors';
// Closable classes
$closableClasses = $closable ? 'pr-1' : '';
// Combine all classes
$classes = implode(' ', array_filter([$baseClasses, $sizeClasses, $shapeClasses, $variantClasses, $closableClasses]));
// Icon SVG mapping
$iconSvg = match($icon) {
'check' => '',
'x' => '',
'alert-circle' => '',
'info' => '',
'clock' => '',
'shield' => '',
'star' => '',
'bell' => '',
'mail' => '',
'phone' => '',
'user' => '',
'lock' => '',
'unlock' => '',
'wifi' => '',
'wifi-off' => '',
'zap' => '',
'activity' => '',
default => null,
};
// Close icon
$closeIcon = '';
@endphp
@if($href)
merge(['class' => $classes]) }}>
@if($dot)
@endif
@if($icon)
{!! $iconSvg !!}
@endif
{{ $slot }}
@if($closable)
{!! $closeIcon !!}
@endif
@else
merge(['class' => $classes]) }}>
@if($dot)
@endif
@if($icon)
{!! $iconSvg !!}
@endif
{{ $slot }}
@if($closable)
{!! $closeIcon !!}
@endif
@endif