From d5f9d8be57cc22c8a917f081f60f4a01cf529580 Mon Sep 17 00:00:00 2001
From: Richard Olsson <r@richardolsson.se>
Date: Sun, 12 Nov 2023 10:26:13 +0100
Subject: [PATCH] Create reusable event list for sign-up (activist portal)

---
 .../events/components/EventSignUpCard.tsx     | 64 +++++++++++++++++++
 .../events/components/EventSignUpList.tsx     | 21 ++++++
 2 files changed, 85 insertions(+)
 create mode 100644 src/features/events/components/EventSignUpCard.tsx
 create mode 100644 src/features/events/components/EventSignUpList.tsx

diff --git a/src/features/events/components/EventSignUpCard.tsx b/src/features/events/components/EventSignUpCard.tsx
new file mode 100644
index 0000000000..f9162d2d5e
--- /dev/null
+++ b/src/features/events/components/EventSignUpCard.tsx
@@ -0,0 +1,64 @@
+import { FC } from 'react';
+import {
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardMedia,
+  Typography,
+  useTheme,
+} from '@mui/material';
+
+import { ZetkinEvent } from 'utils/types/zetkin';
+
+type EventSignUpCardProps = {
+  event: ZetkinEvent;
+};
+
+const EventSignUpCard: FC<EventSignUpCardProps> = ({ event }) => {
+  const theme = useTheme();
+  // TODO: Instead of always using the en-US .toLocaleString, update to match the user settings.
+  const startTime = new Date(event.start_time).toLocaleString('sv-SE', {
+    hour: 'numeric',
+    minute: 'numeric',
+  });
+
+  return (
+    <Card sx={{ marginTop: '2rem' }}>
+      <CardMedia
+        alt={event.title || undefined}
+        component="img"
+        height="140"
+        image="https://zetkin.org/assets/img/hero.jpg"
+      />
+      <CardContent>
+        <Typography component="div" gutterBottom variant="h5">
+          {event.title}
+        </Typography>
+        <Typography
+          component="p"
+          gutterBottom
+          sx={{ color: theme.palette.secondary.main, fontSize: '.7rem' }}
+        >
+          {startTime} - {event.location?.title}
+        </Typography>
+        <Typography color={theme.palette.secondary.main} variant="body2">
+          {event.info_text}
+        </Typography>
+      </CardContent>
+      <CardActions sx={{ justifyContent: 'space-between' }}>
+        <Button
+          href={`/o/${event.organization.id}/projects/${event.id}`}
+          size="small"
+        >
+          Read more
+        </Button>
+        <Button size="small" variant="contained">
+          Count me in!
+        </Button>
+      </CardActions>
+    </Card>
+  );
+};
+
+export default EventSignUpCard;
diff --git a/src/features/events/components/EventSignUpList.tsx b/src/features/events/components/EventSignUpList.tsx
new file mode 100644
index 0000000000..56076b3e24
--- /dev/null
+++ b/src/features/events/components/EventSignUpList.tsx
@@ -0,0 +1,21 @@
+import { Box } from '@mui/material';
+import { FC } from 'react';
+
+import EventSignUpCard from './EventSignUpCard';
+import { ZetkinEvent } from 'utils/types/zetkin';
+
+type EventSignUpListProps = {
+  events: ZetkinEvent[];
+};
+
+const EventSignUpList: FC<EventSignUpListProps> = ({ events }) => {
+  return (
+    <Box>
+      {events.map((event) => {
+        return <EventSignUpCard key={event.id} event={event} />;
+      })}
+    </Box>
+  );
+};
+
+export default EventSignUpList;