Joseph.Rawlings
7190d7a818
- Refactored select component to align with shadcn design principles. - Updated server status indicator component for consistency with shadcn style. - Modified spinner component to follow shadcn design guidelines. - Enhanced stat card component with shadcn-inspired styles. - Adjusted tab panel component to reflect shadcn design updates. - Revamped table row and table data cell components to match shadcn aesthetics. - Updated table header cell component for improved styling consistency. - Refined table component to align with shadcn design principles. - Enhanced tabs component with shadcn-inspired styles. - Updated toggle component to follow shadcn design guidelines. - Refactored tooltip component to align with shadcn design principles. - Updated server card component to reflect shadcn-inspired design.
51 lines
1.5 KiB
PHP
51 lines
1.5 KiB
PHP
{{--
|
|
Table Header Cell Component - shadcn-style
|
|
--}}
|
|
|
|
@props([
|
|
'align' => 'start',
|
|
'sortable' => false,
|
|
'sortKey' => null,
|
|
'currentSort' => null,
|
|
'currentDirection' => 'asc',
|
|
])
|
|
|
|
@php
|
|
$alignClasses = [
|
|
'start' => 'text-left',
|
|
'center' => 'text-center',
|
|
'end' => 'text-right',
|
|
];
|
|
$alignClass = $alignClasses[$align] ?? $alignClasses['start'];
|
|
|
|
$isSorted = $sortable && $sortKey === $currentSort;
|
|
@endphp
|
|
|
|
<th
|
|
{{ $attributes->class([
|
|
'h-10 px-4 font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
|
|
$alignClass,
|
|
'cursor-pointer select-none hover:text-foreground transition-colors duration-150' => $sortable,
|
|
]) }}
|
|
@if($sortable && $sortKey)
|
|
wire:click="sort('{{ $sortKey }}')"
|
|
@endif
|
|
>
|
|
<div class="flex items-center gap-1.5 @if($align === 'end') justify-end @elseif($align === 'center') justify-center @endif">
|
|
<span>{{ $slot }}</span>
|
|
@if($sortable)
|
|
<span class="text-muted-foreground">
|
|
@if($isSorted)
|
|
@if($currentDirection === 'asc')
|
|
<x-ri-arrow-up-s-line class="size-4" />
|
|
@else
|
|
<x-ri-arrow-down-s-line class="size-4" />
|
|
@endif
|
|
@else
|
|
<x-ri-arrow-up-down-line class="size-3.5 opacity-50" />
|
|
@endif
|
|
</span>
|
|
@endif
|
|
</div>
|
|
</th>
|