49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
import type { EventInfo } from './types';
|
|
import dayjs from 'dayjs';
|
|
import { Calendar } from 'lucide-react';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import { Skeleton } from '../ui/skeleton';
|
|
|
|
export function EventCardView({ eventInfo, actionFooter }: { eventInfo: EventInfo; actionFooter: React.ReactNode }) {
|
|
const { type, coverImage, eventName, description, startTime, endTime } = eventInfo;
|
|
const startDayJs = dayjs(startTime);
|
|
const endDayJs = dayjs(endTime);
|
|
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" />
|
|
<img
|
|
src={coverImage}
|
|
alt="Event cover"
|
|
className="relative z-20 aspect-video w-full object-cover rounded-t-xl"
|
|
/>
|
|
<Skeleton
|
|
className="absolute z-15 aspect-video w-full object-cover rounded-t-xl"
|
|
/>
|
|
<CardHeader>
|
|
<CardAction>
|
|
{type === 'official' ? <Badge variant="secondary">Official</Badge> : <Badge variant="destructive">Party</Badge>}
|
|
</CardAction>
|
|
<CardTitle>{eventName}</CardTitle>
|
|
<CardDescription className="flex flex-row items-center text-xs">
|
|
<Calendar className="size-4 mr-2" />
|
|
{`${startDayJs.format('YYYY/MM/DD')} - ${endDayJs.format('YYYY/MM/DD')}`}
|
|
</CardDescription>
|
|
<CardDescription className="mt-1">
|
|
{description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardFooter>
|
|
{actionFooter}
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|