feat: add EventCard

1 files changed, 59 insertions, 0 deletions

diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
new file mode 100644
index 0000000..88984ff
--- /dev/null
+++ b/src/components/EventCard/EventCard.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { 
+  Card,
+  CardHeader,
+  CardContent,
+  CardActions,
+  Button
+} from '@material-ui/core';
+import { Event } from '../../types';
+
+interface PropTypes {
+  event: Event;
+}
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    margin: theme.spacing(1),
+    maxWidth: theme.spacing(60)
+  }
+}));
+
+const EventCard: React.FC<PropTypes> = ({ event }) => {
+  const classes = useStyles();
+  const { data: { 
+    name,
+    date,
+    participants,
+    conferenceId,
+    attendanceId
+  }} = event;
+
+  return (
+    <Card variant="outlined" className={classes.root}>
+      <CardHeader title={name || 'Event'} subheader={date}  />
+      <CardContent>
+        {conferenceId && <div> ConferenceID: {conferenceId} </div>}
+        {attendanceId && <div> AttendanceID: {attendanceId} </div>}
+        <div>
+          Participants ({participants?.length || 0} / 3)
+          <ul>
+            {participants?.map(username => (
+              <li> {username} </li>
+            ))}
+          </ul>
+        </div>
+      </CardContent>
+      {(participants?.length || 0) < 3 && (
+        <CardActions>
+          <Button variant="contained" color="primary" size="large">
+            Join
+          </Button>
+        </CardActions>
+      )}
+    </Card>
+  );
+};
+
+export default EventCard;