82 lines
2.3 KiB
Vue
82 lines
2.3 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { router } from '@inertiajs/vue3';
|
||
|
|
import { cva } from 'class-variance-authority';
|
||
|
|
import { computed } from 'vue';
|
||
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||
|
|
import { Skeleton } from '@/components/ui/skeleton';
|
||
|
|
import { cn } from '@/lib/utils';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
label: string;
|
||
|
|
count: number;
|
||
|
|
status: 'danger' | 'warning' | 'info' | 'success';
|
||
|
|
href: string;
|
||
|
|
loading?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
loading: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
const cardVariants = cva(
|
||
|
|
'cursor-pointer transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
|
||
|
|
{
|
||
|
|
variants: {
|
||
|
|
status: {
|
||
|
|
danger: 'border-red-500/50 bg-red-500/5 hover:bg-red-500/10',
|
||
|
|
warning:
|
||
|
|
'border-amber-500/50 bg-amber-500/5 hover:bg-amber-500/10',
|
||
|
|
info: 'border-blue-500/50 bg-blue-500/5 hover:bg-blue-500/10',
|
||
|
|
success:
|
||
|
|
'border-green-500/50 bg-green-500/5 hover:bg-green-500/10',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
);
|
||
|
|
|
||
|
|
const countColorClass = computed(() => {
|
||
|
|
const map: Record<string, string> = {
|
||
|
|
danger: 'text-red-600',
|
||
|
|
warning: 'text-amber-600',
|
||
|
|
info: 'text-blue-600',
|
||
|
|
success: 'text-green-600',
|
||
|
|
};
|
||
|
|
return map[props.status] ?? '';
|
||
|
|
});
|
||
|
|
|
||
|
|
function navigate(): void {
|
||
|
|
router.get(props.href);
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleKeydown(event: KeyboardEvent): void {
|
||
|
|
if (event.key === 'Enter' || event.key === ' ') {
|
||
|
|
event.preventDefault();
|
||
|
|
navigate();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<Card
|
||
|
|
:class="cn(cardVariants({ status }))"
|
||
|
|
role="button"
|
||
|
|
tabindex="0"
|
||
|
|
aria-pressed="false"
|
||
|
|
@click="navigate"
|
||
|
|
@keydown="handleKeydown"
|
||
|
|
>
|
||
|
|
<CardHeader class="pb-2">
|
||
|
|
<CardTitle class="text-sm font-medium text-muted-foreground">
|
||
|
|
<Skeleton v-if="loading" class="h-4 w-20" />
|
||
|
|
<template v-else>{{ label }}</template>
|
||
|
|
</CardTitle>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent>
|
||
|
|
<Skeleton v-if="loading" class="h-8 w-16" />
|
||
|
|
<div v-else :class="cn('text-3xl font-bold', countColorClass)">
|
||
|
|
{{ count }}
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
</template>
|