Toast Bar

import { useEffect, useState } from "react";
import styled from "styled-components";
export default function ToastBar({
  className,
  style,
  width,
  backgroundColor = "#333",
  borderRadius = "10px",
  borderColor = "#333",
  borderWidth = "1px",
  child,
  margin = "20px",
  showtime = 3,
  fontColor = "#fff",
  onClose,
  justify = "start",
}) {
  const [isShow, setIsShow] = useState(true);

  useEffect(() => {
    const timer = setTimeout(() => {
      setIsShow(false);
      if (onClose) {
        onClose();
      }
    }, showtime * 1000 + 200);
    return () => {
      clearTimeout(timer);
    };
  }, []);

  return (
    <>
      {isShow && (
        <Styled
          style={style}
          className={className}
          $width={width}
          $backgroundColor={backgroundColor}
          $borderWidth={borderWidth}
          $borderRadius={borderRadius}
          $borderColor={borderColor}
          $margin={margin}
          $showtime={showtime}
          $fontColor={fontColor}
          $justify={justify}
        >
          <div className={"toast show"}> {child}</div>
        </Styled>
      )}
    </>
  );
}

const Styled = styled.div`
  display: flex;
  position: fixed;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: ${({ $justify }) => $justify};
  .toast {
    margin: ${({ $margin }) => $margin};
    z-index: 1;
    color: ${({ $fontColor }) => $fontColor};
    text-align: center;
    padding: 16px;
    visibility: hidden;
    width: ${({ $width }) => $width};
    height: ${({ $height }) => $height};
    border-radius: ${({ $borderRadius }) => $borderRadius};
    background-color: ${({ $backgroundColor }) => $backgroundColor};
    overflow: hidden;
    border: ${({ $borderWidth }) => $borderWidth} solid
      ${({ $borderColor }) => $borderColor};
  }
  .toast.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s ${({ $showtime }) => $showtime + "s"};
  }

  @keyframes fadein {
    from {
      bottom: 0;
      opacity: 0;
    }
    to {
      bottom: 30px;
      opacity: 1;
    }
  }

  @keyframes fadeout {
    from {
      bottom: 30px;
      opacity: 1;
    }
    to {
      bottom: 0;
      opacity: 0;
    }
  }
`;

import { useState } from "react";
import ToastBar from "../../example/ToastBar";

export default function TestView() {
  const [showToast, setSetShowToast] = useState(false);
  return (
    <div className="test-view">
      <button onClick={() => setSetShowToast(true)}>show Toast</button>
      {showToast && (
        <ToastBar
          margin="40px"
          child={"Hello Toast Bar!"}
          onClose={() => setSetShowToast(false)}
        />
      )}
    </div>
  );
}