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

import {
  Badge,
  Box,
  Button,
  Card,
  CardBody,
  CardHeader,
  Heading,
  Image,
  Text,
} 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'}
    >
      <CardBody
        position={"absolute"}
        h={"100%"}
        w={"100%"}
        bottom={0}
        backgroundColor={"#ffffff"}
        // 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 display={"flex"} flexDirection={"column"} alignItems={"start"}>
            <Heading className="web-text-large " mb={0} size="md">
              {heading}
            </Heading>

            <Text className="web-text-medium" as={"span"} isTruncated={true}>
              {subHeading}
            </Text>
            <Button
              fontWeight={"bold"}
              className="web-text-xsmall"
              ps={3}
              pe={3}
              pt={1}
              pb={1}
              mt={2}
              // color={"#ffffff"}
              // bg={'#1E114B'}
              // bgGradient="linear(to-r, #1E114B, #1E114B)"
              variant={"outline"}
              colorScheme="teal"
              rounded={"md"}
              size={"xs"}
            >
              {ctoBtnTitle}
            </Button>
          </Box>

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

export default CommunityBannerCard;