feat(client): event list

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/cms/src/components/events/event-card.view.tsx

@@ -0,0 +1,48 @@
+import type { EventInfo } from './types';
+import dayjs from 'dayjs';
+import { Calendar } from 'lucide-react';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardAction,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+import { Skeleton } from '../ui/skeleton';
+
+export function EventCardView({ type, coverImage, eventName, description, startTime, endTime, onJoinEvent }: 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>
+        <Button className="w-full" onClick={onJoinEvent}>加入活动</Button>
+      </CardFooter>
+    </Card>
+  );
+}