refactor(events): move grid components from event-list to event-grid directory

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

client/cms/src/components/events/event-grid/event-grid.container.tsx

@@ -0,0 +1,59 @@
+import type { EventInfo } from '../types';
+import PlaceholderImage from '@/assets/event-placeholder.png';
+import { useGetEvents } from '@/hooks/data/useGetEvents';
+import { Button } from '../../ui/button';
+import { DialogTrigger } from '../../ui/dialog';
+import { EventJoinDialogContainer } from '../event-join.dialog.container';
+import { KycDialogContainer } from '../kyc/kyc.dialog.container';
+import { EventGridSkeleton } from './event-grid.skeleton';
+import { EventGridView } from './event-grid.view';
+
+function JoinButton() {
+  return (
+    <Button className="w-full">加入活动</Button>
+  );
+}
+
+export function EventGridContainer() {
+  const { data, isLoading } = useGetEvents();
+
+  return (
+    isLoading
+      ? <EventGridSkeleton />
+      : (
+        <EventGridView
+          events={data.pages.flatMap(page => page.data ?? []).map(it => ({
+            type: it.type! as EventInfo['type'],
+            eventId: it.event_id!,
+            isJoined: it.is_joined!,
+            requireKyc: it.enable_kyc!,
+            coverImage: it.thumbnail! || PlaceholderImage,
+            eventName: it.name!,
+            description: it.description!,
+            startTime: new Date(it.start_time!),
+            endTime: new Date(it.end_time!),
+          } satisfies EventInfo))}
+          footer={eventInfo => (eventInfo.isJoined
+            ? <Button className="w-full" disabled>已加入</Button>
+            : (
+              eventInfo.requireKyc
+                ? (
+                  <KycDialogContainer event={eventInfo}>
+                    <DialogTrigger asChild>
+                      <JoinButton />
+                    </DialogTrigger>
+                  </KycDialogContainer>
+                )
+                : (
+                  <EventJoinDialogContainer event={eventInfo}>
+                    <DialogTrigger asChild>
+                      <JoinButton />
+                    </DialogTrigger>
+                  </EventJoinDialogContainer>
+                )
+            )
+          )}
+        />
+      )
+  );
+}

client/cms/src/components/events/event-grid/event-grid.empty.tsx

@@ -0,0 +1,16 @@
+import { FileQuestionMark } from 'lucide-react';
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '../../ui/empty';
+
+export function EventGridEmpty() {
+  return (
+    <Empty className="h-full">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <FileQuestionMark />
+        </EmptyMedia>
+        <EmptyTitle>暂无活动</EmptyTitle>
+        <EmptyDescription>前面的区域 以后再来探索吧</EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  );
+}

client/cms/src/components/events/event-grid/event-grid.error.tsx

@@ -0,0 +1,16 @@
+import { FileExclamationPoint } from 'lucide-react';
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '../../ui/empty';
+
+export function EventGridError() {
+  return (
+    <Empty className="h-full">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <FileExclamationPoint />
+        </EmptyMedia>
+        <EmptyTitle>活动列表加载失败</EmptyTitle>
+        <EmptyDescription>前面的区域 以后再来探索吧</EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  );
+}

client/cms/src/components/events/event-grid/event-grid.skeleton.tsx

@@ -0,0 +1,12 @@
+import { EventCardSkeleton } from '../event-card.skeleton';
+
+export function EventGridSkeleton() {
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+      {Array.from({ length: 4 }).map((_, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <EventCardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,18 @@
+import type { EventInfo } from '../types';
+import { EventCardView } from '../event-card.view';
+import { EventGridEmpty } from './event-grid.empty';
+
+export function EventGridView({ events, footer }: { events: EventInfo[]; footer: (event: EventInfo) => React.ReactNode }) {
+  return (
+    <>
+      {events.length > 0 && (
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
+          {events.map(event => (
+            <EventCardView key={event.eventId} eventInfo={event} actionFooter={footer(event)} />
+          ))}
+        </div>
+      )}
+      {events.length === 0 && <EventGridEmpty />}
+    </>
+  );
+}