EventCard.js

import React from "react";

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, size }) => {
  console.log(Object.values(eventData));
  return (
    <>
      {/* Small marketplace card */}
      {size === "small" && (
        <Card>
          <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: 140 }}
                height={140}
                image={eventData.eventImage}
                alt="Event Image"
              />
            </Grid>
          </Grid>
        </Paper>
      )}
    </>
  );
};

export default EventCard;