Improve layout (#74)

This improves the layout of all our pages to look more like the mandala page. Additionally, some form widgets now have better layout, and the header takes up less vertical space. At an implementation level, the component hierarchy of pages has been inverted to make this kind of layout easier. Now fully laid-out pages are contained within `<Page>` components that are at the top of the component hierarchy, and which are defined by each specific page (mandala, creature, vocabulary, etc). I had to do a few architectural things to avoid circular imports, though; most notably, this involved the creation of a new React context called a `PageContext`. It uses CSS grid, which should be pretty well-supported amongst recent browsers.
2021-04-02 19:00:29 -04:00 · 2021-04-02 19:00:29 -04:00 · 1cbe2b6d22
commit 1cbe2b6d22
--- a/index.html
+++ b/index.html
@ -3,7 +3,44 @@
 <title>Mystic Symbolic</title>
 <style>
 html, body {
+  margin: 0;
+  padding: 0;
  font-family: "Calibri", "Arial", "Helvetica Neue", sans-serif;
+  overflow: hidden;
+}
+
+.page {
+  display: grid;
+  column-gap: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+  height: 100vh;
+  width: 100vw;
+  grid-template-columns: auto 20em;
+  grid-template-rows: 3em auto 3em;
+  grid-template-areas:
+    "header header"
+    "canvas sidebar"
+    "footer footer";
+}
+
+header {
+  grid-area: header;
+  display: flex;
+}
+
+header h1 {
+  margin: 0;
+  flex-grow: 1;
+}
+
+.sidebar {
+  grid-area: sidebar;
+  overflow-y: auto;
+}
+
+footer {
+  grid-area: footer;
 }

 select, input[type="text"] {
@ -31,6 +68,10 @@ select, input[type="text"] {
  margin-bottom: 10px;
 }

+.thingy:first-child {
+  margin-top: 0;
+}
+
 ul.navbar {
  display: flex;
  list-style-type: none;
@ -47,59 +88,61 @@ ul.navbar li {

 ul.navbar li:last-child {
  border-right: none;
+  padding-right: 0;
+  margin-right: 0;
 }

-.mandala-container {
-  position: relative;
-}
-
-.mandala-container .canvas {
+.flex-widget {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-widget label {
+  margin-bottom: 8px;
+}
+
+.canvas {
+  grid-area: canvas;
  display: flex;
-  width: 100%;
-  height: 85vh;
  align-items: center;
  justify-content: center;
  overflow: hidden;
 }

-.mandala-container .sidebar {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: 8px;
-  width: 20em;
-  background-color: rgba(255, 255, 255, 0.9);
+.canvas.scrollable {
+  display: block;
+  overflow: auto;
 }

-.mandala-container label.checkbox {
+.sidebar label.checkbox {
  display: block;
  margin-top: 10px;
  margin-bottom: 10px;
 }

-.mandala-container .color-widget {
+.sidebar .color-widget {
  display: flex;
 }

-.mandala-container .color-widget label {
+.sidebar .color-widget label {
  flex-grow: 1;
 }

-.mandala-container .numeric-slider {
+.sidebar .numeric-slider {
  display: flex;
  flex-direction: column;
 }

-.mandala-container .numeric-slider .slider {
+.sidebar .numeric-slider .slider {
  display: flex;
 }

-.mandala-container .numeric-slider .slider input {
+.sidebar .numeric-slider .slider input {
  flex-basis: 90%;
 }
 </style>
 <noscript>
  <p>Alas, you need JavaScript to peruse this page.</p>
 </noscript>
-<div id="app"></div>
+<div id="app" className="app"></div>
 <script src="lib/browser-main.tsx"></script>
--- a/lib/browser-main.tsx
+++ b/lib/browser-main.tsx
@ -1,22 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { WavesPage } from "./pages/waves-page";
-import { VocabularyPage } from "./pages/vocabulary-page";
-import { CreaturePage } from "./pages/creature-page";
-import { MandalaPage } from "./pages/mandala-page";
-import { DebugPage } from "./pages/debug-page";
-
-const Pages = {
-  vocabulary: VocabularyPage,
-  creature: CreaturePage,
-  waves: WavesPage,
-  mandala: MandalaPage,
-  debug: DebugPage,
-};
-
-type PageName = keyof typeof Pages;
-
-const pageNames = Object.keys(Pages) as PageName[];
+import { PageContext, PAGE_QUERY_ARG } from "./page";
+import { pageNames, Pages, toPageName, DEFAULT_PAGE } from "./pages";

 const APP_ID = "app";

@ -26,53 +11,20 @@ if (!appEl) {
  throw new Error(`Unable to find #${APP_ID}!`);
 }

-const Navbar: React.FC<{ currPageName: string }> = (props) => (
-  <ul className="navbar">
-    {pageNames.map((pageName) => (
-      <li key={pageName}>
-        {props.currPageName === pageName ? (
-          pageName
-        ) : (
-          <a href={`?p=${encodeURIComponent(pageName)}`}>{pageName}</a>
-        )}
-      </li>
-    ))}
-  </ul>
-);
-
 const App: React.FC<{}> = (props) => {
  const page = new URLSearchParams(window.location.search);
-  const currPageName = toPageName(page.get("p") || "", "vocabulary");
-  const PageComponent = Pages[currPageName];
+  const currPage = toPageName(page.get(PAGE_QUERY_ARG) || "", DEFAULT_PAGE);
+  const PageComponent = Pages[currPage];
+  const ctx: PageContext = {
+    currPage,
+    allPages: pageNames,
+  };

  return (
-    <>
-      <header>
-        <Navbar currPageName={currPageName} />
-      </header>
-      <main>
-        <PageComponent />
-      </main>
-      <footer>
-        <p>
-          For more details about this project, see its{" "}
-          <a href="https://github.com/toolness/mystic-symbolic" target="_blank">
-            GitHub repository
-          </a>
-          .
-        </p>
-      </footer>
-    </>
+    <PageContext.Provider value={ctx}>
+      <PageComponent />
+    </PageContext.Provider>
  );
 };

 ReactDOM.render(<App />, appEl);
-
-function isPageName(page: string): page is PageName {
-  return pageNames.includes(page as any);
-}
-
-function toPageName(page: string, defaultValue: PageName): PageName {
-  if (isPageName(page)) return page;
-  return defaultValue;
-}
--- a/lib/page.tsx
+++ b/lib/page.tsx
@ -0,0 +1,60 @@
+import React, { useContext } from "react";
+import type { PageName } from "./pages";
+
+export type PageContext = {
+  currPage: PageName;
+  allPages: PageName[];
+};
+
+export const PageContext = React.createContext<PageContext>({
+  currPage: "vocabulary",
+  allPages: [],
+});
+
+export const PAGE_QUERY_ARG = "p";
+
+const PageLink: React.FC<{ page: PageName }> = ({ page }) => (
+  <a href={`?${PAGE_QUERY_ARG}=${encodeURIComponent(page)}`}>{page}</a>
+);
+
+const Navbar: React.FC<{}> = (props) => {
+  const pc = useContext(PageContext);
+
+  return (
+    <nav>
+      <ul className="navbar">
+        {pc.allPages.map((pageName) => (
+          <li key={pageName}>
+            {pc.currPage === pageName ? pageName : <PageLink page={pageName} />}
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+};
+
+export type PageProps = {
+  title: string;
+  children?: any;
+};
+
+export const Page: React.FC<PageProps> = ({ title, children }) => {
+  return (
+    <div className="page">
+      <header>
+        <h1>{title}</h1>
+        <Navbar />
+      </header>
+      {children}
+      <footer>
+        <p>
+          For more details about this project, see its{" "}
+          <a href="https://github.com/toolness/mystic-symbolic" target="_blank">
+            GitHub repository
+          </a>
+          .
+        </p>
+      </footer>
+    </div>
+  );
+};
--- a/lib/pages/creature-page.tsx
+++ b/lib/pages/creature-page.tsx
@ -25,6 +25,7 @@ import {
  CompositionContextWidget,
  createSvgCompositionContext,
 } from "../svg-composition-context";
+import { Page } from "../page";

 /** Symbols that can be the "root" (i.e., main body) of a creature. */
 const ROOT_SYMBOLS = SvgVocabulary.items.filter(
@ -190,49 +191,54 @@ export const CreaturePage: React.FC<{}> = () => {
  });

  return (
-    <>
-      <h1>Creature!</h1>
-      <CompositionContextWidget ctx={compCtx} onChange={setCompCtx} />
-      <div className="thingy"></div>
-      <div className="thingy">
-        <NumericSlider
-          label="Random creature complexity"
-          min={0}
-          max={MAX_COMPLEXITY_LEVEL}
-          step={1}
-          value={complexity}
-          onChange={(value) => {
-            setComplexity(value);
-            newRandomSeed();
-          }}
-        />
+    <Page title="Creature!">
+      <div className="sidebar">
+        <CompositionContextWidget ctx={compCtx} onChange={setCompCtx} />
+        <div className="thingy">
+          <NumericSlider
+            label="Random creature complexity"
+            min={0}
+            max={MAX_COMPLEXITY_LEVEL}
+            step={1}
+            value={complexity}
+            onChange={(value) => {
+              setComplexity(value);
+              newRandomSeed();
+            }}
+          />
+        </div>
+        <div className="thingy">
+          <Checkbox
+            label="Randomly invert symbols"
+            value={randomlyInvert}
+            onChange={setRandomlyInvert}
+          />
+        </div>
+        <div className="thingy">
+          <button accessKey="r" onClick={newRandomSeed}>
+            <u>R</u>andomize!
+          </button>{" "}
+          <ExportWidget
+            basename={getDownloadBasename(randomSeed)}
+            svgRef={svgRef}
+          />
+        </div>
      </div>
-      <div className="thingy">
-        <Checkbox
-          label="Randomly invert symbols"
-          value={randomlyInvert}
-          onChange={setRandomlyInvert}
-        />
+      <div className="canvas" style={{ backgroundColor: compCtx.background }}>
+        <CreatureContext.Provider value={ctx}>
+          <HoverDebugHelper>
+            <AutoSizingSvg
+              padding={20}
+              ref={svgRef}
+              bgColor={compCtx.background}
+            >
+              <SvgTransform transform={svgScale(0.5)}>
+                <CreatureSymbol {...creature} />
+              </SvgTransform>
+            </AutoSizingSvg>
+          </HoverDebugHelper>
+        </CreatureContext.Provider>
      </div>
-      <div className="thingy">
-        <button accessKey="r" onClick={newRandomSeed}>
-          <u>R</u>andomize!
-        </button>{" "}
-        <button onClick={() => window.location.reload()}>Reset</button>{" "}
-        <ExportWidget
-          basename={getDownloadBasename(randomSeed)}
-          svgRef={svgRef}
-        />
-      </div>
-      <CreatureContext.Provider value={ctx}>
-        <HoverDebugHelper>
-          <AutoSizingSvg padding={20} ref={svgRef} bgColor={compCtx.background}>
-            <SvgTransform transform={svgScale(0.5)}>
-              <CreatureSymbol {...creature} />
-            </SvgTransform>
-          </AutoSizingSvg>
-        </HoverDebugHelper>
-      </CreatureContext.Provider>
-    </>
+    </Page>
  );
 };
--- a/lib/pages/debug-page.tsx
+++ b/lib/pages/debug-page.tsx
@ -3,6 +3,7 @@ import { AutoSizingSvg } from "../auto-sizing-svg";
 import { CreatureContext, CreatureContextType } from "../creature-symbol";
 import { createCreatureSymbolFactory } from "../creature-symbol-factory";
 import { HoverDebugHelper } from "../hover-debug-helper";
+import { Page } from "../page";
 import { createSvgSymbolContext } from "../svg-symbol";
 import { svgScale, SvgTransform } from "../svg-transform";
 import { SvgVocabulary } from "../svg-vocabulary";
@ -60,18 +61,21 @@ export const DebugPage: React.FC<{}> = () => {
  };

  return (
-    <>
-      <h1>Debug!</h1>
-      <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
-      <CreatureContext.Provider value={ctx}>
-        <HoverDebugHelper>
-          <AutoSizingSvg padding={20}>
-            <SvgTransform transform={svgScale(0.5)}>
-              {EYE_CREATURE}
-            </SvgTransform>
-          </AutoSizingSvg>
-        </HoverDebugHelper>
-      </CreatureContext.Provider>
-    </>
+    <Page title="Debug!">
+      <div className="sidebar">
+        <SymbolContextWidget ctx={symbolCtx} onChange={setSymbolCtx} />
+      </div>
+      <div className="canvas">
+        <CreatureContext.Provider value={ctx}>
+          <HoverDebugHelper>
+            <AutoSizingSvg padding={20}>
+              <SvgTransform transform={svgScale(0.5)}>
+                {EYE_CREATURE}
+              </SvgTransform>
+            </AutoSizingSvg>
+          </HoverDebugHelper>
+        </CreatureContext.Provider>
+      </div>
+    </Page>
  );
 };
--- a/lib/pages/index.tsx
+++ b/lib/pages/index.tsx
@ -0,0 +1,28 @@
+import { WavesPage } from "./waves-page";
+import { VocabularyPage } from "./vocabulary-page";
+import { CreaturePage } from "./creature-page";
+import { MandalaPage } from "./mandala-page";
+import { DebugPage } from "./debug-page";
+
+export const Pages = {
+  vocabulary: VocabularyPage,
+  creature: CreaturePage,
+  waves: WavesPage,
+  mandala: MandalaPage,
+  debug: DebugPage,
+};
+
+export type PageName = keyof typeof Pages;
+
+export const pageNames = Object.keys(Pages) as PageName[];
+
+export const DEFAULT_PAGE: PageName = "vocabulary";
+
+export function isPageName(page: string): page is PageName {
+  return pageNames.includes(page as any);
+}
+
+export function toPageName(page: string, defaultValue: PageName): PageName {
+  if (isPageName(page)) return page;
+  return defaultValue;
+}
--- a/lib/pages/mandala-page.tsx
+++ b/lib/pages/mandala-page.tsx
@ -29,6 +29,7 @@ import {
  CompositionContextWidget,
  createSvgCompositionContext,
 } from "../svg-composition-context";
+import { Page } from "../page";

 type ExtendedMandalaCircleParams = MandalaCircleParams & {
  scaling: number;
@ -281,71 +282,65 @@ export const MandalaPage: React.FC<{}> = () => {
  }

  return (
-    <>
-      <h1>Mandala!</h1>
-      <div
-        className="mandala-container"
-        style={{ backgroundColor: baseCompCtx.background }}
-      >
-        <div className="sidebar">
-          <CompositionContextWidget
-            ctx={baseCompCtx}
-            onChange={setBaseCompCtx}
+    <Page title="Mandala!">
+      <div className="sidebar">
+        <CompositionContextWidget ctx={baseCompCtx} onChange={setBaseCompCtx} />
+        <fieldset>
+          <legend>First circle</legend>
+          <ExtendedMandalaCircleParamsWidget
+            idPrefix="c1"
+            value={circle1}
+            onChange={setCircle1}
          />
+        </fieldset>
+        <div className="thingy">
+          <Checkbox
+            label="Add a second circle"
+            value={useTwoCircles}
+            onChange={setUseTwoCircles}
+          />
+        </div>
+        {useTwoCircles && (
          <fieldset>
-            <legend>First circle</legend>
+            <legend>Second circle</legend>
            <ExtendedMandalaCircleParamsWidget
-              idPrefix="c1"
-              value={circle1}
-              onChange={setCircle1}
+              idPrefix="c2"
+              value={circle2}
+              onChange={setCircle2}
+            />
+            <Checkbox
+              label="Invert colors"
+              value={invertCircle2}
+              onChange={setInvertCircle2}
+            />{" "}
+            <Checkbox
+              label="Place behind first circle"
+              value={firstBehindSecond}
+              onChange={setFirstBehindSecond}
            />
          </fieldset>
-          <div className="thingy">
-            <Checkbox
-              label="Add a second circle"
-              value={useTwoCircles}
-              onChange={setUseTwoCircles}
-            />
-          </div>
-          {useTwoCircles && (
-            <fieldset>
-              <legend>Second circle</legend>
-              <ExtendedMandalaCircleParamsWidget
-                idPrefix="c2"
-                value={circle2}
-                onChange={setCircle2}
-              />
-              <Checkbox
-                label="Invert colors"
-                value={invertCircle2}
-                onChange={setInvertCircle2}
-              />{" "}
-              <Checkbox
-                label="Place behind first circle"
-                value={firstBehindSecond}
-                onChange={setFirstBehindSecond}
-              />
-            </fieldset>
-          )}
-          <div className="thingy">
-            <button accessKey="r" onClick={randomize}>
-              <u>R</u>andomize!
-            </button>{" "}
-            <ExportWidget basename="mandala" svgRef={svgRef} />
-          </div>
-        </div>
-        <div className="canvas">
-          <HoverDebugHelper>
-            <AutoSizingSvg
-              padding={20}
-              ref={svgRef}
-              bgColor={baseCompCtx.background}
-            >
-              <SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>
-            </AutoSizingSvg>
-          </HoverDebugHelper>
+        )}
+        <div className="thingy">
+          <button accessKey="r" onClick={randomize}>
+            <u>R</u>andomize!
+          </button>{" "}
+          <ExportWidget basename="mandala" svgRef={svgRef} />
        </div>
      </div>
-    </>
+      <div
+        className="canvas"
+        style={{ backgroundColor: baseCompCtx.background }}
+      >
+        <HoverDebugHelper>
+          <AutoSizingSvg
+            padding={20}
+            ref={svgRef}
+            bgColor={baseCompCtx.background}
+          >
+            <SvgTransform transform={svgScale(0.5)}>{circles}</SvgTransform>
+          </AutoSizingSvg>
+        </HoverDebugHelper>
+      </div>
+    </Page>
  );
 };
--- a/lib/pages/vocabulary-page.tsx
+++ b/lib/pages/vocabulary-page.tsx
@ -9,6 +9,7 @@ import { SvgVocabulary } from "../svg-vocabulary";
 import { SvgSymbolContext } from "../svg-symbol";
 import { SymbolContextWidget } from "../symbol-context-widget";
 import { HoverDebugHelper } from "../hover-debug-helper";
+import { Page } from "../page";

 type SvgSymbolProps = {
  data: SvgSymbolData;
@ -49,43 +50,47 @@ export const VocabularyPage: React.FC<{}> = () => {
  );

  return (
-    <>
-      <h1>Mystic Symbolic Vocabulary</h1>
-      <div className="thingy">
-        <label htmlFor="filter">Search: </label>
-        <input
-          type="text"
-          id="filter"
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-        />
+    <Page title="Mystic Symbolic Vocabulary">
+      <div className="sidebar">
+        <div className="flex-widget">
+          <label htmlFor="filter">Search for symbols: </label>
+          <input
+            type="text"
+            id="filter"
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            placeholder="🔎"
+          />
+        </div>
+        <SymbolContextWidget ctx={ctx} onChange={setCtx} />
      </div>
-      <SymbolContextWidget ctx={ctx} onChange={setCtx} />
-      <HoverDebugHelper>
-        {items.map((symbolData) => (
-          <div
-            key={symbolData.name}
-            style={{
-              display: "inline-block",
-              border: "1px solid black",
-              margin: "4px",
-            }}
-          >
+      <div className="canvas scrollable">
+        <HoverDebugHelper>
+          {items.map((symbolData) => (
            <div
+              key={symbolData.name}
              style={{
-                backgroundColor: "black",
-                color: "white",
-                padding: "4px",
+                display: "inline-block",
+                border: "1px solid black",
+                margin: "4px",
              }}
            >
-              {symbolData.name}
+              <div
+                style={{
+                  backgroundColor: "black",
+                  color: "white",
+                  padding: "4px",
+                }}
+              >
+                {symbolData.name}
+              </div>
+              <div className="checkerboard-bg" style={{ lineHeight: 0 }}>
+                <SvgSymbol data={symbolData} scale={0.25} {...ctx} />
+              </div>
            </div>
-            <div className="checkerboard-bg" style={{ lineHeight: 0 }}>
-              <SvgSymbol data={symbolData} scale={0.25} {...ctx} />
-            </div>
-          </div>
-        ))}
-      </HoverDebugHelper>
-    </>
+          ))}
+        </HoverDebugHelper>
+      </div>
+    </Page>
  );
 };
--- a/lib/pages/waves-page.tsx
+++ b/lib/pages/waves-page.tsx
@ -1,6 +1,7 @@
 import React, { useState } from "react";
 import { ColorWidget } from "../color-widget";
 import { NumericSlider } from "../numeric-slider";
+import { Page } from "../page";

 const WAVE_STROKE = "#79beda";
 const WAVE_FILL = "#2b7c9e";
@ -104,61 +105,64 @@ const Waves: React.FC<{}> = () => {

  return (
    <>
-      <svg width="1280px" height="720px" viewBox="0 0 1280 720">
-        {waves}
-      </svg>
-      <p>
-        <ColorWidget value={stroke} onChange={setStroke} label="Stroke" />{" "}
-        <ColorWidget value={fill} onChange={setFill} label="Fill" />
-      </p>
-      <NumericSlider
-        label="Number of waves"
-        min={1}
-        max={NUM_WAVES * 2}
-        value={numWaves}
-        step={1}
-        onChange={setNumWaves}
-      />
-      <NumericSlider
-        label="Cycle duration"
-        min={0.1}
-        max={3}
-        value={duration}
-        step={0.1}
-        onChange={setDuration}
-        valueSuffix="s"
-      />
-      <NumericSlider
-        label="Initial y-velocity"
-        min={1}
-        max={WAVE_PARALLAX_TRANSLATE_VELOCITY * 4}
-        value={initialYVel}
-        step={1}
-        onChange={setInitialYVel}
-      />
-      <NumericSlider
-        label="Y-acceleration"
-        min={1}
-        max={WAVE_PARALLAX_TRANSLATE_ACCEL * 2}
-        value={yAccel}
-        step={1}
-        onChange={setYAccel}
-      />
-      <NumericSlider
-        label="Scale velocity"
-        min={1.0}
-        max={2}
-        value={scaleVel}
-        step={0.025}
-        onChange={setScaleVel}
-      />
+      <div className="canvas">
+        <svg width="1280px" height="720px" viewBox="0 0 1280 720">
+          {waves}
+        </svg>
+      </div>
+      <div className="sidebar">
+        <div className="thingy">
+          <ColorWidget value={stroke} onChange={setStroke} label="Stroke" />{" "}
+          <ColorWidget value={fill} onChange={setFill} label="Fill" />
+        </div>
+        <NumericSlider
+          label="Number of waves"
+          min={1}
+          max={NUM_WAVES * 2}
+          value={numWaves}
+          step={1}
+          onChange={setNumWaves}
+        />
+        <NumericSlider
+          label="Cycle duration"
+          min={0.1}
+          max={3}
+          value={duration}
+          step={0.1}
+          onChange={setDuration}
+          valueSuffix="s"
+        />
+        <NumericSlider
+          label="Initial y-velocity"
+          min={1}
+          max={WAVE_PARALLAX_TRANSLATE_VELOCITY * 4}
+          value={initialYVel}
+          step={1}
+          onChange={setInitialYVel}
+        />
+        <NumericSlider
+          label="Y-acceleration"
+          min={1}
+          max={WAVE_PARALLAX_TRANSLATE_ACCEL * 2}
+          value={yAccel}
+          step={1}
+          onChange={setYAccel}
+        />
+        <NumericSlider
+          label="Scale velocity"
+          min={1.0}
+          max={2}
+          value={scaleVel}
+          step={0.025}
+          onChange={setScaleVel}
+        />
+      </div>
    </>
  );
 };

 export const WavesPage: React.FC<{}> = () => (
-  <>
-    <h1>Waves!</h1>
+  <Page title="Waves!">
    <Waves />
-  </>
+  </Page>
 );
--- a/lib/vocabulary-widget.tsx
+++ b/lib/vocabulary-widget.tsx
@ -20,7 +20,7 @@ export function VocabularyWidget<T extends VocabularyType>({
  id = id || slugify(label);

  return (
-    <>
+    <div className="flex-widget">
      <label htmlFor={id}>{label}: </label>
      <select
        id={id}
@ -33,6 +33,6 @@ export function VocabularyWidget<T extends VocabularyType>({
          </option>
        ))}
      </select>
-    </>
+    </div>
  );
 }