pixelstreamingv2/src/components/pages/Stream/LanguageButton/LanguageButton.tsx

import microOn from "images/icons/MicroOn.svg";

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

import { Button } from "components/shared/Button/Button";

const container = {
  hidden: {
    opacity: 0,
    transition: { duration: 0.2, ease: "easeOut" },
  },
  show: {
    opacity: 1,
    transition: { delay: 0.15, duration: 0.2, ease: "easeIn" },
  },
  exit: {
    opacity: 0,
    transition: { duration: 0.2, ease: "easeOut" },
  },
};

export const LanguageButton: React.FC<any> = ({ hover, setHover, isSidebarWide }) => {
  const [active, setActive] = useState(false);
  const [open, setOpen] = useState(false);

  const button = {
    icon: microOn,
    active: "language-control-btn",
    inactive: "language-control-btn",
    type: "language",
  };

  function handleClick() {
    setOpen(true);
    setActive((prev) => !prev);
  }

  return (
    <div className="toolbar-button-area">
      <Button isSidebarWide={isSidebarWide} button={button} onClick={handleClick}></Button>
      <AnimatePresence>
        {open && (
          <motion.div
            variants={container}
            initial={"hidden"}
            animate={"show"}
            exit={"hidden"}
          >
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
};