rubix/src/components/EventsPage/UpcomingEvents.jsx

/* eslint-disable no-unused-vars */
import {
  Box,
  Container,
  Text,
  Image,
  Button,
  SimpleGrid,
} from "@chakra-ui/react";
import HappenCard from "../Card/HappenCard";

const Latest = [
  {
    id: 1,
    date: `Sunday, 10 May 2024`,
    text: `Financial Times Crypto & Digital Assets Summit Panel`,
    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
    curentDate: "10",
    month: "MAY",
  },
  {
    id: 2,
    date: `Sunday, 15 Jan 2024`,
    text: `Financial Times Crypto & Digital Assets Summit Panel`,
    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
    curentDate: "10",
    month: "MAY",
  },
  {
    id: 3,
    date: `Sunday, 14 Feb 2024`,
    text: `Financial Times Crypto & Digital Assets Summit Panel`,
    para: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et massa mi. ",
    curentDate: "10",
    month: "MAY",
  },
];

const Content = {
  heading: `Upcoming Events`,
};

const UpcomingEvents = () => {
  return (
    <Box
      // height={"100vh"}
      background={"#000"}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
      paddingTop={"2rem"}
      sx={{
        "@media (max-width: 500px)": {
          paddingTop: "0px",
        },
      }}
    >
      <Container
        maxW={"container.xl"}
        padding={"0 5rem"}
        paddingBottom={"2rem"}
        sx={{
          "@media (max-width: 1024px)": {
            padding: "3rem",
          },
          "@media (max-width: 500px)": {
            padding: "1rem",
          },
        }}
      >
        <Text
          as={"h2"}
          paddingTop={"2rem"}
          paddingBottom={"2rem"}
          fontWeight={700}
          fontSize={"26px"}
          textTransform={"capitalize"}
          color={"#fff"}
          sx={{
            "@media (max-width: 500px)": {
              fontSize: "22px",
              fontWeight: "400",
            },
          }}
        >
          {Content.heading}
        </Text>
        <Box
          paddingBottom={"2rem"}
          // height={"50vh"}
          sx={{
            "@media (max-width: 500px)": {
              paddingLeft: "0rem",
            },
          }}
        >
          <Box>
            <SimpleGrid
              spacing={5}
              templateColumns="repeat(auto-fill, minmax(300px, 1fr))"
              sx={{
                "@media (max-width: 500px)": {
                  display: "flex",
                  overflowX: "scroll",
                  "&::-webkit-scrollbar": {
                    width: "0px",
                  },
                },
              }}
            >
              {Latest.map((item) => (
                <HappenCard
                  key={item.id}
                  date={item.date}
                  text={item.text}
                  para={item.para}
                  curentDate={item.curentDate}
                  month={item.month}
                />
              ))}
            </SimpleGrid>
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default UpcomingEvents;