feat: display Events in a grid

2 files changed, 19 insertions, 20 deletions

diff --git a/src/components/EventCard/EventCard.tsx b/src/components/EventCard/EventCard.tsx
index 88984ff..192d0b3 100644
--- a/src/components/EventCard/EventCard.tsx
+++ b/src/components/EventCard/EventCard.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import { 
+import {
   Card,
   CardHeader,
   CardContent,
@@ -13,25 +12,19 @@ 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;
+  const {
+    data: {
+      name,
+      date,
+      participants,
+      conferenceId,
+      attendanceId
+    }
+  } = event;
 
   return (
-    <Card variant="outlined" className={classes.root}>
+    <Card variant="outlined">
       <CardHeader title={name || 'Event'} subheader={date}  />
       <CardContent>
         {conferenceId && <div> ConferenceID: {conferenceId} </div>}
diff --git a/src/containers/BsuFantomSection/BsuFantomSection.tsx b/src/containers/BsuFantomSection/BsuFantomSection.tsx
index 90632d7..527c41b 100644
--- a/src/containers/BsuFantomSection/BsuFantomSection.tsx
+++ b/src/containers/BsuFantomSection/BsuFantomSection.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ContentSection } from 'react-benzin';
-import { Link } from '@material-ui/core';
+import { Grid, Link } from '@material-ui/core';
 import EventCard from '../../components/EventCard/EventCard';
 import { useEvents } from '../../hooks/APIClient';
 
@@ -13,7 +13,13 @@ const BsuFantomSection: React.FC = () => {
         Schedule your offline <Link href="https://edufpmi.bsu.by">EDUFPMI</Link> conference attendance
       </p>
       <ContentSection sectionName="Upcoming events" level={2}>
-        {events?.map(event => <EventCard event={event} />)}
+        <Grid container spacing={2}>
+          {events?.map(event => (
+            <Grid item xs={4}>
+              <EventCard event={event} />
+            </Grid>
+          ))}
+        </Grid>
       </ContentSection>
     </ContentSection>
   );