new

frontend/src/components/activity/ActivityCard.stories.jsx

@@ -0,0 +1,67 @@
+
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import ActivityCard from './ActivityCard';
+import '../../index.css'; // Global styles
+import '../../App.css'; 
+
+export default {
+  title: 'Components/Activity/ActivityCard',
+  component: ActivityCard,
+  decorators: [
+    (Story) => (
+      <MemoryRouter>
+        <div style={{ maxWidth: '400px', padding: '20px' }}>
+          <Story />
+        </div>
+      </MemoryRouter>
+    ),
+  ],
+  tags: ['autodocs'],
+};
+
+const Template = (args) => <ActivityCard {...args} />;
+
+export const NotStarted = Template.bind({});
+NotStarted.args = {
+  activity: {
+    id: 1,
+    title: 'Future AI Hardware Summit 2026',
+    start_time: '2026-12-01T09:00:00',
+    status: '即将开始',
+    cover_image: 'https://images.unsplash.com/photo-1485827404703-89b55fcc595e?auto=format&fit=crop&q=80',
+  },
+};
+
+export const Ongoing = Template.bind({});
+Ongoing.args = {
+  activity: {
+    id: 2,
+    title: 'Edge Computing Hackathon',
+    start_time: '2025-10-20T10:00:00',
+    status: '报名中',
+    cover_image: 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80',
+  },
+};
+
+export const Ended = Template.bind({});
+Ended.args = {
+  activity: {
+    id: 3,
+    title: 'Deep Learning Workshop',
+    start_time: '2023-05-15T14:00:00',
+    status: '已结束',
+    cover_image: 'https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80',
+  },
+};
+
+export const SignedUp = Template.bind({});
+SignedUp.args = {
+  activity: {
+    id: 4,
+    title: 'Exclusive Developer Meetup',
+    start_time: '2025-11-11T18:00:00',
+    status: '已报名',
+    cover_image: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&q=80',
+  },
+};