- improved ui for region selector and camera settings

src/features/cameras/components/CameraSettings/RegionSelector.tsx

@@ -1,5 +1,6 @@
 import ColourPicker from "./ColourPicker";
-import type { Region } from "../../../../types/types";
+import type { PaintedCell, Region } from "../../../../types/types";
+import type { RefObject } from "react";
 
 type RegionSelectorProps = {
   regions: Region[];
@@ -8,6 +9,7 @@ type RegionSelectorProps = {
   onChangeRegionColour: (index: number, colour: string) => void;
   mode: string;
   onSelectMode: (mode: string) => void;
+  paintedCells: RefObject<Map<string, PaintedCell>>;
 };
 
 const RegionSelector = ({
@@ -17,49 +19,100 @@ const RegionSelector = ({
   onChangeRegionColour,
   mode,
   onSelectMode,
+  paintedCells,
 }: RegionSelectorProps) => {
   const handleChange = (e: { target: { value: string } }) => {
     onSelectMode(e.target.value);
   };
 
-  return (
-    <div>
-      <div>
-        <h2 className="text-xl">Region Select</h2>
-      </div>
-      <div>
-        {regions.map((region, idx) => (
-          <div
-            key={region.name}
-            className="items-center p-4 border border-gray-700 bg-slate-700 rounded-xl m-4 w-[40%]"
-          >
-            <label style={{ marginRight: "0.5rem" }}>
-              <input
-                type="radio"
-                checked={selectedRegionIndex === idx}
-                onChange={() => {
-                  onSelectMode("painter");
-                  onSelectRegion(idx);
-                }}
-              />{" "}
-              {region.name}
-            </label>
-            <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
-          </div>
-        ))}
-        <div>
-          <h2 className="text-xl">Tools</h2>
-        </div>
-        <div className="flex flex-col">
-          <label htmlFor="mode">
-            <input id="mode" type="radio" onChange={handleChange} checked={mode === "painter"} value="painter" />
-            Paint mode
-          </label>
+  const handleResetClick = () => {
+    const map = paintedCells.current;
+    map.clear();
+  };
 
-          <label htmlFor="erase">
-            <input type="radio" onChange={handleChange} checked={mode === "eraser"} value={"eraser"} />
-            Erase mode
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 md:grid-rows-2 gap-4">
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
+        <h2 className="text-2xl mb-2">Tools</h2>
+        <div className="flex flex-col">
+          <label
+            htmlFor="paintMode"
+            className={`p-4 border rounded-lg  mb-2
+            ${mode === "painter" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+          >
+            <input
+              id="paintMode"
+              type="radio"
+              onChange={handleChange}
+              checked={mode === "painter"}
+              value="painter"
+              className="sr-only"
+            />
+            <span className="text-xl">Paint mode</span>
           </label>
+          <label
+            htmlFor="eraseMode"
+            className={`p-4 border rounded-lg  mb-2
+            ${mode === "eraser" ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"}
+            hover:bg-[#202b36] hover:cursor-pointer`}
+          >
+            <input
+              id="eraseMode"
+              type="radio"
+              onChange={handleChange}
+              checked={mode === "eraser"}
+              value={"eraser"}
+              className="sr-only"
+            />
+            <span className="text-xl">Erase mode</span>
+          </label>
+        </div>
+      </div>
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col">
+        <h2 className="text-2xl mb-2">Region Select</h2>
+        <>
+          {regions.map((region, idx) => {
+            const isSelected = selectedRegionIndex === idx;
+            const inputId = `region-${idx}`;
+            return (
+              <label
+                htmlFor={inputId}
+                key={region.name}
+                className={`items-center p-4 m-4 rounded-xl border flex flex-row justify-between
+                  ${isSelected ? "border-gray-400 bg-[#202b36]" : "bg-[#253445] border-gray-700"} hover:bg-[#202b36] hover:cursor-pointer`}
+              >
+                <div className="flex flex-row gap-4 items-center">
+                  <input
+                    type="radio"
+                    checked={isSelected}
+                    id={inputId}
+                    name="region"
+                    className="sr-only"
+                    onChange={() => {
+                      onSelectMode("painter");
+                      onSelectRegion(idx);
+                    }}
+                  />
+                  <span className="text-xl">{region.name}</span>
+                </div>
+                <ColourPicker colour={region.brushColour} setColour={(c: string) => onChangeRegionColour(idx, c)} />
+                <p className="text-slate-400">{region.brushColour}</p>
+              </label>
+            );
+          })}
+        </>
+      </div>
+
+      <div className="p-2 border border-gray-600 rounded-lg flex flex-col md:col-span-2">
+        <div className="flex flex-col">
+          <h2 className="text-2xl mb-2">Actions</h2>
+          <button
+            onClick={handleResetClick}
+            className="mt-2 px-4 py-2 border border-red-600 rounded-md text-white bg-red-600 w-full md:w-[40%] hover:bg-red-700 hover:cursor-pointer"
+          >
+            Reset Regions
+          </button>
         </div>
       </div>
     </div>