feat(client): joined event list

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

client/cms/src/stories/events/event-grid.stories.tsx

@@ -1,8 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { EventGridSkeleton } from '@/components/events/event-grid/event-grid.skeleton';
 import { EventGridView } from '@/components/events/event-grid/event-grid.view';
+import { JoinedEventGridFooter } from '@/components/events/joined-events.containers';
 import { Button } from '@/components/ui/button';
 import { Skeleton as UiSkeleton } from '@/components/ui/skeleton';
+import { exampleMultiEvents } from './event.example';
 
 const meta = {
   title: 'Events/EventGrid',
@@ -14,56 +16,18 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    events: [
-      {
-        eventId: '1',
-        requireKyc: true,
-        isJoined: false,
-        type: 'official',
-        coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-watersplash.png?raw=true',
-        eventName: 'Nix CN Conference 26.05',
-        description: 'Event Description',
-        startTime: new Date('2026-06-13T04:00:00.000Z'),
-        endTime: new Date('2026-06-14T04:00:00.000Z'),
-      },
-      {
-        eventId: '2',
-        requireKyc: true,
-        isJoined: false,
-        type: 'official',
-        coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-moonscape.png?raw=true',
-        eventName: 'Nix CN Conference 26.05',
-        description: 'Event Description',
-        startTime: new Date('2026-06-13T04:00:00.000Z'),
-        endTime: new Date('2026-06-14T04:00:00.000Z'),
-      },
-      {
-        eventId: '3',
-        requireKyc: true,
-        isJoined: false,
-        type: 'official',
-        coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-nineish-catppuccin-latte.png?raw=true',
-        eventName: 'Nix CN Conference 26.05',
-        description: 'Event Description',
-        startTime: new Date('2026-06-13T04:00:00.000Z'),
-        endTime: new Date('2026-06-14T04:00:00.000Z'),
-      },
-      {
-        eventId: '4',
-        requireKyc: true,
-        isJoined: false,
-        type: 'official',
-        coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nixos-wallpaper-catppuccin-macchiato.png?raw=true',
-        eventName: 'Nix CN Conference 26.05',
-        description: 'Event Description',
-        startTime: new Date('2026-06-13T04:00:00.000Z'),
-        endTime: new Date('2026-06-14T04:00:00.000Z'),
-      },
-    ],
+    events: exampleMultiEvents,
     footer: () => <Button className="w-full">加入活动</Button>,
   },
 };
 
+export const Joined: Story = {
+  args: {
+    events: exampleMultiEvents,
+    footer: event => <JoinedEventGridFooter event={event} />,
+  },
+};
+
 export const Empty: Story = {
   decorators: [Story => <div className="h-screen"><Story /></div>],
   args: {

client/cms/src/stories/events/event.example.ts

@@ -11,3 +11,50 @@ export const exampleEvent: EventInfo = {
   startTime: new Date('2026-06-13T04:00:00.000Z'),
   endTime: new Date('2026-06-14T04:00:00.000Z'),
 };
+
+export const exampleMultiEvents: EventInfo[] = [
+  {
+    eventId: '1',
+    requireKyc: true,
+    isJoined: false,
+    type: 'official',
+    coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-watersplash.png?raw=true',
+    eventName: 'Nix CN Conference 26.05',
+    description: 'Event Description',
+    startTime: new Date('2026-06-13T04:00:00.000Z'),
+    endTime: new Date('2026-06-14T04:00:00.000Z'),
+  },
+  {
+    eventId: '2',
+    requireKyc: true,
+    isJoined: false,
+    type: 'official',
+    coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-moonscape.png?raw=true',
+    eventName: 'Nix CN Conference 26.05',
+    description: 'Event Description',
+    startTime: new Date('2026-06-13T04:00:00.000Z'),
+    endTime: new Date('2026-06-14T04:00:00.000Z'),
+  },
+  {
+    eventId: '3',
+    requireKyc: true,
+    isJoined: false,
+    type: 'official',
+    coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nix-wallpaper-nineish-catppuccin-latte.png?raw=true',
+    eventName: 'Nix CN Conference 26.05',
+    description: 'Event Description',
+    startTime: new Date('2026-06-13T04:00:00.000Z'),
+    endTime: new Date('2026-06-14T04:00:00.000Z'),
+  },
+  {
+    eventId: '4',
+    requireKyc: true,
+    isJoined: false,
+    type: 'official',
+    coverImage: 'https://github.com/NixOS/nixos-artwork/blob/master/wallpapers/nixos-wallpaper-catppuccin-macchiato.png?raw=true',
+    eventName: 'Nix CN Conference 26.05',
+    description: 'Event Description',
+    startTime: new Date('2026-06-13T04:00:00.000Z'),
+    endTime: new Date('2026-06-14T04:00:00.000Z'),
+  },
+];