41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { Calendar } from 'lucide-react';
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import { Badge } from '../ui/badge';
|
|
import { Skeleton } from '../ui/skeleton';
|
|
|
|
export function EventCardSkeleton() {
|
|
return (
|
|
<Card className="relative mx-auto w-full max-w-sm pt-0">
|
|
<div className="absolute inset-0 z-30 aspect-video bg-black/10" />
|
|
<Skeleton
|
|
className="relative z-20 aspect-video w-full object-cover rounded-t-xl"
|
|
/>
|
|
<CardHeader>
|
|
<CardAction>
|
|
<Badge variant="secondary" className="bg-accent animate-pulse text-accent select-none">Official</Badge>
|
|
</CardAction>
|
|
<CardTitle>
|
|
<Skeleton className="h-4 max-w-48" />
|
|
</CardTitle>
|
|
<CardDescription className="flex flex-row items-center text-xs">
|
|
<Calendar className="size-4 mr-2" />
|
|
<Skeleton className="h-4 w-24" />
|
|
</CardDescription>
|
|
<CardDescription className="mt-1">
|
|
<Skeleton className="h-5 max-w-64" />
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardFooter>
|
|
<Skeleton className="h-9 px-4 py-2 w-full"></Skeleton>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|