rubix/src/components/Community/Happen.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: `Latest Happenings`,
};

const Happen = () => {
  return ( 
    <Box
      // height={"100vh"}
      background={"#000"}
      backgroundSize={"cover"}
      backgroundRepeat={"no-repeat"}
    >
      <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={"40px"}
          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
            textAlign={"center"}
            marginTop={"4rem"}
            sx={{
              "@media (max-width: 500px)": {
                marginTop: "2rem",
              },
            }}
          >
            <Button
              position={"relative"}
              backgroundColor={"transparent"}
              cursor={"pointer"}
              transition="background-color 0.3s ease-in-out, color 0.1s ease-in-out"
              color={"#fff"}
              width={"216px"}
              height={"54px"}
              fontFamily={"Poppins"}
              fontWeight={"400"}
              border={"1px solid white"}
              borderRadius={"10px"}
              fontSize={"20px"}
              zIndex={"1"}
              overflow={"hidden"}
              sx={{
                "::before": {
                  content: '""',
                  position: "absolute",
                  top: "50%",
                  left: "50%",
                  transform: "translate(-50%, -50%)",
                  width: "65px",
                  height: "65px",
                  borderRadius: "50%",
                  transition: "0.35s linear",
                  zIndex: -1,
                  bgGradient:
                    "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
                  opacity: "0",
                },
                "&:hover::before": {
                  width: "100%",
                  height: "120%",
                  borderRadius: "0px",
                  opacity: "1",
                },
                "@media (max-width: 500px)": {
                  fontSize: "14px",
                  fontWeight: "400",
                  height: "40px",
                  width: "140px",
                  bgGradient:
                    "radial-gradient(circle, #ffffff, #eee2f2, #e7c3dc, #e5a3ba, #de858e)",
                  color: "#000",
                  // fontWeight: "600",
                },
              }}
              _hover={{
                color: "#000",
                border: "1px solid white",
                zIndex: 1,
              }}
            >
              View More
            </Button>
          </Box>
        </Box>
      </Container>
    </Box>
  );
};

export default Happen;