added the dev tools menu for whatever tools needed in the future that require a databaseOC.

src/app/dev-tools/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+import React from "react";
+import styles from "@/styles/dev-tools.module.css"
+import { Container, Select, Stack } from "@mui/material"
+export default function Page(){
+
+  return (
+    <div className={styles.maincontainer}>
+      <div className={styles.leftmenucontainer}>
+        <LeftMenu />
+      </div>
+      <div className={styles.editorcontainer}>
+        <Editor />
+      </div>
+    </div>
+  )
+}
+
+function DynamicCard() {
+  // to add a new kind of data type "map", "string", "bool", etc. they add a prop for it.
+  return (
+    <>
+    </>
+  )
+}
+
+
+interface Theme{
+  value: string;
+  label: string;
+}
+function LeftMenu(){
+  const unitTypes: string[] = ["minion", "enemy", "hero", "ally"];
+  const buildingTypes: string[] = ["enemy", "minion", "terrain", "support"];
+  const [themes, setThemes] = React.useState<Theme[]>([]); // get from the database
+  const [menuMode, setMenuMode] = React.useState<"unit" | "card">("card");
+  return (
+    <Container className={styles.leftmenu}>
+      <Stack>
+        Type
+        <Select>
+          <option value="">
+            All types
+          </option>
+          {menuMode === "card" ? 
+            buildingTypes.map((opt) => (<option value={opt}>{opt[0].toUpperCase() + opt.slice(1)}</option>)) : 
+            unitTypes.map((opt) => (<option value={opt}>{opt[0].toUpperCase() + opt.slice(1)}</option>))
+          }
+        </Select>
+
+        Theme
+        <Select>
+        </Select>
+      </Stack>
+    </Container>
+  )
+}
+
+
+function Editor(){
+  return (
+    <Container className={styles.editor} maxWidth={false} disableGutters> 
+      yes
+    </Container>
+  )
+}