From 05831db42f8e996e46b641503c1a2dc0acf8c66d Mon Sep 17 00:00:00 2001
From: vmork <vallemork@gmail.com>
Date: Fri, 13 Sep 2024 11:22:33 +0200
Subject: [PATCH] add toggle for edit mode, disabled in prod

---
 src/app/student/map/_components/MainView.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/app/student/map/_components/MainView.tsx b/src/app/student/map/_components/MainView.tsx
index 49b8c52..018c07f 100644
--- a/src/app/student/map/_components/MainView.tsx
+++ b/src/app/student/map/_components/MainView.tsx
@@ -14,17 +14,16 @@ import {
 import { useState } from "react"
 import { BoothID, BoothMap } from "../lib/booths"
 import { LocationId, locations } from "../lib/locations"
+import { Button } from "@/components/ui/button"
 
 export default function MainView({
   boothsByLocation,
   boothsById,
-  exhibitorsById,
-  editorMode = false
+  exhibitorsById
 }: {
   boothsByLocation: Map<LocationId, BoothMap>
   boothsById: BoothMap
   exhibitorsById: Map<number, Exhibitor>
-  editorMode?: boolean
 }) {
   const [locationId, setLocationId] = useState<LocationId>("nymble/1")
   const location = locations.find(loc => loc.id === locationId)!
@@ -33,6 +32,8 @@ export default function MainView({
   const [activeBoothId, setActiveBoothId] = useState<BoothID | null>(null)
   const [hoveredBoothId, setHoveredBoothId] = useState<BoothID | null>(null)
 
+  const [editorMode, setEditorMode] = useState(false)
+
   return (
     <div className="relative flex h-full w-full">
       {!editorMode ? (
@@ -63,10 +64,22 @@ export default function MainView({
         />
       )}
 
+      {process.env.NODE_ENV === "development" && <EditorToggle />}
+
       <SelectLocation />
     </div>
   )
 
+  function EditorToggle() {
+    return (
+      <Button
+        className="absolute bottom-2 left-2"
+        onClick={() => setEditorMode(prev => !prev)}>
+        {editorMode ? "Switch to normal mode" : "Switch to edit mode"}
+      </Button>
+    )
+  }
+
   function SelectLocation() {
     return (
       <div className="absolute top-2 justify-self-center rounded-full sm:right-2">