mancala/src/components/FloatingPanel.tsx

import * as React from "react";
import { FunctionComponent } from "react";
import { Context } from "../context/context";

const FloatingPanel: FunctionComponent<{
  context: Context;
  color: string;
  visible: boolean;
}> = (props) => {
  if(!props.visible) return <></>
  return (
    <div style={{
      position: "absolute",
      bottom: "0px",
      left: "0px",
      padding: "15px",
      borderTopRightRadius: "1vw",
      minWidth: "10vw",
      minHeight: "1vw",
      backgroundColor: props.color,
    }}>
      {props.children}
    </div>
  )
};

export default FloatingPanel;