silphius/app/react-components/devtools.jsx

import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
import 'react-tabs/style/react-tabs.css';

import styles from './devtools.module.css';

import Tiles from './devtools/tiles.jsx';

export default function Devtools({
  applyFilters,
  brush,
  layer,
  setApplyFilters,
  setBrush,
  setLayer,
  setStamp,
}) {
  return (
    <div className={styles.devtools}>

      <Tabs>
        <TabList>
          <Tab>Dashboard</Tab>
          <Tab>Tiles</Tab>
        </TabList>

        <TabPanel>
          <form>
            <div className={styles.engineBar}>
              <label>
                Apply filters
                <input
                  checked={applyFilters}
                  onChange={() => {
                    setApplyFilters(!applyFilters);
                  }}
                  type="checkbox"
                />
              </label>
            </div>
          </form>

        </TabPanel>

        <TabPanel>
          <Tiles
            brush={brush}
            layer={layer}
            setBrush={setBrush}
            setLayer={setLayer}
            setStamp={setStamp}
          />
        </TabPanel>
      </Tabs>
    </div>
  );
}