Refined Query Console

import React from "react";

import Typography from "@material-ui/core/Typography";

import { makeStyles, alpha } from "@material-ui/core/styles";

import Button from "@material-ui/core/Button";

import ButtonGroup from "@material-ui/core/ButtonGroup";

import TextField from "@material-ui/core/TextField";

import Zoom from "@material-ui/core/Zoom";

import Link from "@material-ui/core/Link";

import StyledTooltip from "./StyledTooltip.jsx";

import ContentCopyIcon from '@mui/icons-material/ContentCopy';

import PolylineIcon from '@mui/icons-material/Polyline';

import PlayArrowIcon from '@mui/icons-material/PlayArrow';

import SwitchLeftIcon from '@mui/icons-material/SwitchLeft';

import SwitchRightIcon from '@mui/icons-material/SwitchRight';

import ArrowDropDownCircleIcon from '@mui/icons-material/ArrowDropDownCircle';

import Checkbox, {checkboxClasses} from "@mui/material/Checkbox";

const useStyles = makeStyles(theme => ({

  button: {

    width: "auto",

    color: "#000",

    backgroundColor: "#fff",

    justifyContent: "flex-start",

    "&:hover": {

      backgroundColor: alpha("#eee", 0.9)

    }

  }

}));

/**

 * Component lets user view and use stac queries

 *

 * @component

 * @example

 * <StacQueryConsole />

 *

 */

export default function StacQueryConsole() {

  const classes = useStyles();

  const [consoleFunctionVal, setConsoleFunctionVal] = React.useState(false);

  const handleConsoleFunctionChange = (event) => {

    setConsoleFunctionVal(event.target.checked);

  }

  return (

    <details id="query-console-container">

      <summary id="query-console-collapsed">

        STAC Query Console

        <span id="query-console-title">

          <ArrowDropDownCircleIcon sx={{marginRight:1}}/> STAC Query Console

        </span>

        <span id="query-function">

          <Checkbox />

          Auto-populate with: 

          {consoleFunctionVal ? " WKT String" : " STAC Query"}

          <Checkbox id="grabWktCheckBox" checked={consoleFunctionVal} onChange={handleConsoleFunctionChange}

                icon={<SwitchLeftIcon/>} checkedIcon={<SwitchRightIcon/>} color="default"/>

        </span>

      </summary>

      <div id="query-console-expanded">

          <div id="query-textarea-container">

            <textarea id="query-textarea" placeholder=">_"></textarea>

            <textarea id="query-textarea" placeholder="> Type Query Here"></textarea>

            <div id="query-command-bar">

              <ButtonGroup 

                orientation="vertical" 

                size="small" 

                variant="contained">

                <Button>Copy Code</Button>

                <Button>Draw WKT String</Button>

                <Button>Run STAC Query</Button>

                <Button className={classes.button} startIcon={<ContentCopyIcon />}>Copy Code</Button>

                <Button className={classes.button} startIcon={<PolylineIcon />}>Draw WKT String</Button>

                <Button className={classes.button} startIcon={<PlayArrowIcon />}>Run STAC Query</Button>

              </ButtonGroup>

            </div>

          </div>

#query-console-container {

  font-family: Arial, Helvetica, sans-serif;

  color: #FFFFFF;

	background-color: #242424;

	background-color: lightgray;

  padding: 0;

  display: flex;

  flex-direction: column;

#query-console-collapsed {

	line-height: 32px;

	font-weight: 600;

	text-align: left;

  padding-left: 15px;

  padding-left: 10px;

  display: flex;

  justify-content: space-between;

  align-content: baseline;

}

#query-console-title {

  font-weight: 600;

  display: inline-flex;

  align-items: center;

}

#query-function {

  display: inline-flex;

  align-items: center;

}

#query-command-bar {

#query-textarea-container {

  display: flex;

  background: #333333;

  background: #1971c2;

}

#query-textarea {

  font-family: Consolas 'Lucida Console' 'Cascadia Code' monospace;

  font-size: 12pt;

  font-size: 13pt;

  flex: auto;

  resize: none;

  outline: none;

  border-radius: 0;

  border: none;

  background: #333333;

  background: #1971c2;

  color: #FFFFFF;

  width: auto;

  padding: 12px;

  padding: 15px;

}

#query-textarea::placeholder {

  color: #eeeeee;

  opacity: 1;

}

/*