Adding type prop to event card to indicate whether small event or large event card should be shown

frontend/src/Components/EventCard.js

-import React from 'react';
+import React from "react";
 
-import Card from '@mui/material/Card';
-import CardActions from '@mui/material/CardActions';
-import CardContent from '@mui/material/CardContent';
-import CardMedia from '@mui/material/CardMedia';
-import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
+import Paper from "@mui/material/Paper";
+import Card from "@mui/material/Card";
+import Grid from "@mui/material/Grid";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+import CardMedia from "@mui/material/CardMedia";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 
 // Event card - Using material UI framework to bootstrap this process
-const EventCard = ({eventData}) => {
-    console.log(Object.values(eventData))
-    return (
+const EventCard = ({ eventData, size }) => {
+  console.log(Object.values(eventData));
+  return (
+    <>
+      {/* Small marketplace card */}
+      {size === "small" && (
         <Card>
-            <CardMedia
+          <CardMedia
+            component="img"
+            sx={{ maxHeight: 140 }}
+            height={140}
+            image={eventData.eventImage}
+            alt="Event Image"
+          />
+          <CardContent>
+            <div style={{ overflow: "hidden", textOverflow: "ellipsis" }}>
+              <Typography gutterBottom variant="h5" noWrap component="div">
+                {eventData.eventTitle}
+              </Typography>
+            </div>
+            {/* Adding text elipsis to add ... automatically */}
+            <div
+              style={{
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                height: 70,
+              }}
+            >
+              <Typography variant="body2" color="text.secondary">
+                {eventData.eventDescription}
+              </Typography>
+            </div>
+          </CardContent>
+          <CardActions>
+            <Button size="small">Learn More</Button>
+          </CardActions>
+        </Card>
+      )}
+      {/* Large marketplace using paper instead */}
+      {size === "large" && (
+        <Paper>
+          <Grid container>
+            <Grid item xs={6}>
+              <CardMedia
                 component="img"
-                sx={{maxHeight: 300}}
-                height={300}
+                sx={{ maxHeight: 140 }}
+                height={140}
                 image={eventData.eventImage}
                 alt="Event Image"
-            />
-            <CardContent>
-                <div style={{overflow: "hidden", textOverflow: "ellipsis"}}> 
-                    <Typography gutterBottom variant="h5" noWrap component="div">
-                        {eventData.eventTitle}
-                    </Typography>
-                </div>
-                {/* Adding text elipsis to add ... automatically */}
-                <div style={{overflow: "hidden", textOverflow: "ellipsis", height: 70}}> 
-                    <Typography variant="body2" color="text.secondary">
-                        {eventData.eventDescription}
-                    </Typography>
-                </div>
-            </CardContent>
-            <CardActions>
-                <Button size="small">Learn More</Button>
-            </CardActions>
-        </Card>
-    );
+              />
+            </Grid>
+          </Grid>
+        </Paper>
+      )}
+    </>
+  );
 };
 
-export default EventCard; 
\ No newline at end of file
+export default EventCard;

frontend/src/Pages/Marketplace.js

-import React, { useEffect, useState } from 'react';
-import EventCard from '../Components/EventCard';
-import { getAllEvents } from '../api/events';
-import Grid from '@mui/material/Grid';
-import Typography from '@mui/material/Typography';
+import React, { useEffect, useState } from "react";
+import EventCard from "../Components/EventCard";
+import { getAllEvents } from "../api/events";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 
 const Marketplace = () => {
-
-    const [allTickets, setAllTickets] = useState([]);
-
-    useEffect(() =>{
-        async function getEvents(){
-            let tickets = await getAllEvents();
-
-            setAllTickets(tickets.data)
-        }
-        getEvents();
-    },[]);
-
-    useEffect(()=>{
-        console.log(allTickets)
-    },[allTickets])
-
-
-    return (
-         <Grid container spacing={2} sx={{padding: '50px 90px'}}>
-         <Grid item container xs={12}>
-             <Typography variant={'h5'}>All Events</Typography>
-         </Grid>
-          {allTickets.map((val) =>{
-             return (
-                 <Grid item xs={3}>
-                     <EventCard eventData={val}/>
-                 </Grid>
-             )
-         })}
-     </Grid>
-    );
+  // List of events taken from DB
+  const [allEvents, setAllEvents] = useState([]);
+
+  // Selected event to show modal for - If null show list instead!
+  const [selectedEvent, setSelectedEvent] = useState(null);
+
+  // Get all events for the list on marketplace
+  useEffect(() => {
+    async function getEvents() {
+      let tickets = await getAllEvents();
+      setAllEvents(tickets.data);
+    }
+    getEvents();
+  }, []);
+
+  return (
+    <Grid container spacing={2} sx={{ padding: "50px 90px" }}>
+      <Grid item container xs={12}>
+        <Typography variant={"h5"}>All Events</Typography>
+      </Grid>
+      <Grid item container xs={12}>
+        {allEvents.map((val) => {
+          return (
+            <Grid item xs={4}>
+              <EventCard eventData={val} type={"small"} />
+            </Grid>
+          );
+        })}
+      </Grid>
+    </Grid>
+  );
 };
 
-export default Marketplace;
\ No newline at end of file
+export default Marketplace;