rubix-admin-panel/src/Pages/Community/CommunityBannerCard.jsx

import {
  Badge,
  Box,
  Button,
  Card,
  CardBody,
  CardHeader,
  Heading,
  Image,
  Text,
  Tooltip,
} from "@chakra-ui/react";
import React from "react";
import WebButton from "../../Components/WebButton";
import { formatDate } from "../../Components/Functions/UTCConvertor";

const CommunityBannerCard = ({
  bgImage,
  subHeading,
  heading,
  ctoBtnTitle,
  createdAt,
  status,
}) => {
  return (
    <Card
      // bgImage={`https://rubix.betadelivery.com/${bgImage}`}
      color={"teal.900"}
      bgSize="cover"
      bgPosition="center"
      w={"100%"}
      h={"100%"}
      size={"md"}
      // boxShadow="md"
      // overflow={"hidden"}
      position={"relative"}
      // rounded={"lg"}
      boxShadow={
        " rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px"
      }
      
      borderRadius={8.5}
    >
      <CardBody
        position={"absolute"}
        h={"100%"}
        w={"100%"}
        bottom={0}
        // border={"1px solid #9B4651"}
        borderRadius={8}
        overflow={"hidden"}
        backgroundColor={"#000"}
        // backgroundColor={status ? "#ffe5ea": '#ffffff'}
        backdropFilter="blur(1px)"
      >
        {status ? (
          <Badge
            position={"absolute"}
            top={2}
            right={-2}
            pe={3}
            colorScheme="green"
          >
            Active
          </Badge>
        ) : (
          <Badge
            position={"absolute"}
            top={2}
            right={-2}
            pe={3}
            colorScheme="red"
          >
            Inactive
          </Badge>
        )}

        <Box
          mb={0}
          display={"flex"}
          justifyContent={"space-between"}
          h={"100%"}
          w={"100%"}
        >
          <Box
            w={40}
            display={"flex"}
            flexDirection={"column"}
            alignItems={"start"}
          >
            <Tooltip
              className="rounded-2 web-text-xsmall"
              width={"fit-content"}
              placement="top"
              hasArrow
              label={heading}
              bg="blue.200"
            >
              <Box
                display={"flex"}
                className="web-text-large fw-bold"
                alignItems={"center"}
                w={"100%"}
              >
                <Text color={"#DE858E"} as={"span"} isTruncated={true}>
                  {heading}
                </Text>
              </Box>
            </Tooltip>

            <Box
              display={"flex"}
              className="web-text-large fw-bold"
              alignItems={"center"}
              w={180}
            >
              <Tooltip
                className="rounded-2 web-text-xsmall"
                width={"fit-content"}
                placement="top"
                hasArrow
                label={subHeading}
                bg="blue.200"
              >
                <Text
                  className="web-text-medium"
                  as={"span"}
                  isTruncated={true}
                  color={'whitesmoke'}
                >
                  {subHeading}
                </Text>
              </Tooltip>
            </Box>
            <Box
              fontWeight={"normal"}
              className="web-text-xsmall"
              ps={3}
              pe={3}
              pt={1}
              pb={1}
              mt={2}
              color={"#ffffff"}
              // bg={'#1E114B'}
              bgGradient="linear(to-r, #1E114B, purple)"
              variant={"outline"}
              // colorScheme="purple"
              rounded={"md"}
              size={"xs"}
              border={'none'}
              
            >
              {ctoBtnTitle}
            </Box>
          </Box>

          <Box display={"flex"} alignItems={"center"}>
            <Image
              boxShadow={"inner"}
              rounded={"md"}
              w={130}
              h={"75px"}
              src={`https://rubix.betadelivery.com/${bgImage}`}
            />
          </Box>
        </Box>
      </CardBody>
      <span
        className="web-text-xsmall text-secondary fw-bold"
        style={{
          position: "absolute",
          bottom: 4,
          right: 10,
          opacity: 0.5,
        }}
      >
        {formatDate(createdAt)}
      </span>
    </Card>
  );
};

export default CommunityBannerCard;