feat: Enhance UI components with improved styles and responsiveness across various views

This commit is contained in:
2026-04-22 10:56:39 -04:00
parent 8baf7d6c7d
commit 71b031ca64
14 changed files with 108 additions and 103 deletions

View File

@@ -6,6 +6,7 @@
'trend' => null,
'icon' => null,
'href' => null,
'tone' => 'primary', // primary | success | warning | info | error | secondary
])
@php
$trendClass = match($trend) {
@@ -19,10 +20,26 @@
'down' => 'ri-arrow-down-line',
default => null,
};
$toneBg = match($tone) {
'success' => 'bg-success/10 group-hover:bg-success/20',
'warning' => 'bg-warning/10 group-hover:bg-warning/20',
'info' => 'bg-info/10 group-hover:bg-info/20',
'error' => 'bg-error/10 group-hover:bg-error/20',
'secondary' => 'bg-secondary/10 group-hover:bg-secondary/20',
default => 'bg-primary/10 group-hover:bg-primary/20',
};
$toneText = match($tone) {
'success' => 'text-success',
'warning' => 'text-warning',
'info' => 'text-info',
'error' => 'text-error',
'secondary' => 'text-secondary',
default => 'text-primary',
};
$tag = $href ? 'a' : 'div';
@endphp
<{{ $tag }} @if($href) href="{{ $href }}" wire:navigate @endif
{{ $attributes->merge(['class' => 'card-glass card-glass-hover block p-5 group']) }}>
{{ $attributes->merge(['class' => 'card-glass card-glass-hover hover-lift block p-5 group']) }}>
<div class="flex items-start justify-between gap-3">
<div class="min-w-0 flex-1">
<p class="text-xs font-semibold tracking-wider uppercase text-base/60">{{ $label }}</p>
@@ -38,7 +55,7 @@
@endif
</div>
@if($icon)
<div class="size-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center shrink-0 group-hover:bg-primary/20 transition-colors">
<div class="size-10 rounded-lg {{ $toneBg }} {{ $toneText }} flex items-center justify-center shrink-0 transition-colors">
<x-dynamic-component :component="$icon" class="size-5" />
</div>
@endif