feat: Enhance UI components and add command palette

- Updated dropdown component styles and transitions for improved UX.
- Refined checkbox, input, radio, select, and textarea components with consistent error messaging and styling.
- Introduced a new card component for better layout options.
- Added a stat card component for displaying metrics with trends.
- Implemented a command palette for global search and navigation, accessible via Cmd/Ctrl+K.
- Enhanced modal and navigation components with new styles and transitions.
- Improved layout styles for better responsiveness and visual appeal.
This commit is contained in:
2026-04-22 10:40:33 -04:00
parent a910d41e6e
commit 8baf7d6c7d
19 changed files with 859 additions and 82 deletions

View File

@@ -37,8 +37,8 @@
@else
<x-navigation.link :href="route($nav['route'], $nav['params'] ?? [])"
:spa="$nav['spa'] ?? true"
class="flex items-center gap-3 p-3 rounded-lg transition-colors duration-200 w-full
{{ $nav['active'] ? 'bg-primary/10 text-primary font-semibold' : 'hover:bg-primary/5 text-color-base' }}">
class="relative flex items-center gap-3 p-3 rounded-lg transition-all duration-200 w-full
{{ $nav['active'] ? 'bg-primary/10 text-primary font-semibold before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3px] before:rounded-full before:bg-gradient-to-b before:from-primary before:to-secondary' : 'hover:bg-primary/5 text-color-base' }}">
@isset($nav['icon'])
<x-dynamic-component :component="$nav['icon']"
class="size-5 {{ $nav['active'] ? 'text-primary' : 'text-color-muted' }}" />
@@ -98,8 +98,8 @@
@else
<x-navigation.link :href="route($nav['route'], $nav['params'] ?? [])"
:spa="$nav['spa'] ?? true"
class="flex items-center gap-3 p-3 rounded-lg transition-colors duration-200 w-full
{{ $nav['active'] ? 'bg-primary/10 text-primary font-semibold' : 'hover:bg-primary/5 text-color-base' }}">
class="relative flex items-center gap-3 p-3 rounded-lg transition-all duration-200 w-full
{{ $nav['active'] ? 'bg-primary/10 text-primary font-semibold before:absolute before:left-0 before:top-2 before:bottom-2 before:w-[3px] before:rounded-full before:bg-gradient-to-b before:from-primary before:to-secondary' : 'hover:bg-primary/5 text-color-base' }}">
@isset($nav['icon'])
<x-dynamic-component :component="$nav['icon']"
class="size-5 {{ $nav['active'] ? 'text-primary' : 'text-color-muted' }}" />