rubix/src/components/Card/HappenCard.jsx

/* eslint-disable react/prop-types */
/* eslint-disable no-unused-vars */
import { Box, Container, Text, Image, Button } from "@chakra-ui/react";
import CardImg2 from "../../assets/images/cardimg2.png";
import { Badge } from "@chakra-ui/react";
import Loader from "../Loader/Loader";
import { Link } from "react-router-dom";
import { useGetEventsViewQuery } from "../../Redux/slice/eventsViewSlice";

const HappenCard = ({ key, date, text, para, loader, title }) => {
  const { data, isLoading, error } = useGetEventsViewQuery();
  const eventsCard = data?.data?.rows;
  console.log(eventsCard);
  const dateString = date;
  const newDate = new Date(dateString);
  const day = newDate.getDate();
  const month = new Intl.DateTimeFormat("en-US", { month: "long" }).format(
    newDate
  );

  console.log(date);

  if (isLoading) {
    return (
      <div>
        <Loader />
      </div>
    );
  }
  return (
    <>
      <Link to={`/events/${title}`} key={key}>
        <Box
          padding={"1px"}
          borderRadius={"10px"}
          sx={{
            "&:hover": {
              border: "1px solid #DE858E",
            },
          }}
        >
          <Box
            background={"#151419"}
            borderRadius={"10px"}
            position={"relative"}
            minHeight={"355px"}
            key={key}
            sx={{
              "@media (max-width: 500px)": {
                width: "320px",
                minHeight: "300px",
              },
            }}
          >
            <Text
              color={"#fff"}
              backgroundColor={"#DE858E"}
              position={"absolute"}
              top={"0"}
              left={"17"}
              padding={"6px 13px"}
              textAlign={"center"}
            >
              {month}
              <br />
              {day}
            </Text>
            <Image
              src={CardImg2}
              borderTopLeftRadius={"10px"}
              borderTopRightRadius={"10px"}
              sx={{
                "@media (max-width: 500px)": {
                  width: "100%",
                },
              }}
            />
            <Box padding={"1rem"}>
              {(function () {
                const createdAtDate = new Date(date);
                const formattedDate = createdAtDate
                  .toLocaleDateString("en-GB", {
                    day: "2-digit",
                    month: "2-digit",
                    year: "2-digit",
                  })
                  .replace(/\//g, "-");
                return (
                  <Text fontSize={"14px"} color={"#979797"} margin={"10px 0"}>
                    {formattedDate}
                  </Text>
                );
              })()}
              <Text
                color={"#fff"}
                fontSize={"18px"}
                marginBottom={"10px"}
                sx={{
                  "@media (max-width: 500px)": {
                    fontSize: "16px",
                    fontWeight: "400",
                  },
                  display: "-webkit-box",
                  WebkitBoxOrient: "vertical",
                  overflow: "hidden",
                  WebkitLineClamp: 2,
                }}
              >
                {text}
              </Text>
              <Text
                color={"#E1E1E1"}
                fontSize={"14px"}
                sx={{
                  "@media (max-width: 500px)": {
                    fontSize: "14px",
                    fontWeight: "400",
                  },
                  display: "-webkit-box",
                  WebkitBoxOrient: "vertical",
                  overflow: "hidden",
                  WebkitLineClamp: 2,
                }}
              >
                {para}
              </Text>
            </Box>
          </Box>
        </Box>
      </Link>
    </>
  );
};

export default HappenCard;