rubix-explore/src/components/ToastBox.jsx

import { Box, Text, useColorMode } from "@chakra-ui/react";
import React from "react";
import { FaCheck } from "react-icons/fa";
import { IoWarningOutline } from "react-icons/io5";

const ToastBox = ({ message, status }) => {

  const { colorMode} = useColorMode();

  return (
      <Box rounded={5} w={250} bg={colorMode === "light" ? "#fff" : "linear-gradient(126.97deg, rgba(6, 11, 38, 0.74) 28.26%, rgba(26, 31, 55, 1.5) 91.2%)"} color={colorMode === "light" ? "#230A79" : "#fff"} p={3} display={"flex"} alignItems={"center"}>
        {status === "error" || status === "warn" ? <IoWarningOutline /> : <FaCheck /> }
        <Text fontSize={"sm"} as={"span"} ml={2}>{message}</Text>
      </Box>
  );
};

export default ToastBox;