From 0566b637c96c9b8cb1bb515507c6bf012c3f0187 Mon Sep 17 00:00:00 2001
From: Nate Ferrell <nate@scrthq.com>
Date: Mon, 30 Sep 2024 03:36:20 -0500
Subject: [PATCH] feat: #comment updated layout

---
 src/components/DeviceCustomizationForm.tsx | 139 +++++++--------------
 src/components/EditDeviceForm.tsx          |   4 +-
 2 files changed, 49 insertions(+), 94 deletions(-)

diff --git a/src/components/DeviceCustomizationForm.tsx b/src/components/DeviceCustomizationForm.tsx
index 2ee9d47..ae1ed4a 100644
--- a/src/components/DeviceCustomizationForm.tsx
+++ b/src/components/DeviceCustomizationForm.tsx
@@ -1,15 +1,12 @@
-// src/components/DeviceCustomizationForm.tsx
-
 import React, { useState } from "react";
 import { Device, Port } from "../types/devices";
+import * as Form from "@radix-ui/react-form";
 
 interface DeviceCustomizationFormProps {
-  onAddDevice: (device: Omit<Device, "id">) => void;
+  onAddDevice?: (device: Omit<Device, "id">) => void;
 }
 
-const DeviceCustomizationForm: React.FC<DeviceCustomizationFormProps> = ({
-  onAddDevice,
-}) => {
+const DeviceCustomizationForm: React.FC<DeviceCustomizationFormProps> = () => {
   const [name, setName] = useState("");
   const [type, setType] = useState("");
   const [gridSize, setGridSize] = useState(100);
@@ -38,107 +35,65 @@ const DeviceCustomizationForm: React.FC<DeviceCustomizationFormProps> = ({
     ]);
   };
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    onAddDevice({
-      name,
-      type,
-      gridSize,
-      inputs,
-      outputs,
-      position: { x: gridSize, y: gridSize },
-    });
-    // Reset form
-    setName("");
-    setType("");
-    setGridSize(100);
-    setInputs([]);
-    setOutputs([]);
-  };
-
   return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <div>
-        <label
-          htmlFor="name"
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-        >
+    <Form.Root className="space-y-4 p-4 bg-white dark:bg-gray-800 shadow-md rounded-md">
+      <Form.Field name="name" className="flex flex-col">
+        <Form.Label className="mb-2 font-semibold text-gray-900 dark:text-gray-100">
           Name
-        </label>
-        <input
-          type="text"
-          id="name"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          required
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-        />
-      </div>
-      <div>
-        <label
-          htmlFor="type"
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-        >
+        </Form.Label>
+        <Form.Control asChild>
+          <input
+            type="text"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+          />
+        </Form.Control>
+      </Form.Field>
+
+      <Form.Field name="type" className="flex flex-col">
+        <Form.Label className="mb-2 font-semibold text-gray-900 dark:text-gray-100">
           Type
-        </label>
-        <input
-          type="text"
-          id="type"
-          value={type}
-          onChange={(e) => setType(e.target.value)}
-          required
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-        />
-      </div>
-      <div>
-        <label
-          htmlFor="gridSize"
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300"
-        >
+        </Form.Label>
+        <Form.Control asChild>
+          <input
+            type="text"
+            value={type}
+            onChange={(e) => setType(e.target.value)}
+            className="p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+          />
+        </Form.Control>
+      </Form.Field>
+
+      <Form.Field name="gridSize" className="flex flex-col">
+        <Form.Label className="mb-2 font-semibold text-gray-900 dark:text-gray-100">
           Grid Size
-        </label>
-        <input
-          type="number"
-          id="gridSize"
-          value={gridSize}
-          onChange={(e) => setGridSize(Number(e.target.value))}
-          required
-          min="100"
-          max="2000"
-          className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
-        />
-      </div>
-      <div>
+        </Form.Label>
+        <Form.Control asChild>
+          <input
+            type="number"
+            value={gridSize}
+            onChange={(e) => setGridSize(Number(e.target.value))}
+            className="p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-gray-100"
+          />
+        </Form.Control>
+      </Form.Field>
+
+      <div className="flex justify-between">
         <button
-          type="button"
           onClick={handleAddInput}
-          className="mr-2 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors"
+          className="px-2 py-1 text-sm bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800"
         >
           Add Input
         </button>
         <button
-          type="button"
           onClick={handleAddOutput}
-          className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
+          className="px-2 py-1 text-sm bg-green-500 text-white rounded-md hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800"
         >
           Add Output
         </button>
       </div>
-      <div>
-        <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
-          Inputs: {inputs.length}
-        </h4>
-        <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
-          Outputs: {outputs.length}
-        </h4>
-      </div>
-      <button
-        type="submit"
-        className="w-full px-4 py-2 bg-indigo-500 text-white rounded hover:bg-indigo-600 transition-colors"
-      >
-        Add Device
-      </button>
-    </form>
+    </Form.Root>
   );
 };
 
diff --git a/src/components/EditDeviceForm.tsx b/src/components/EditDeviceForm.tsx
index be0c58a..326b266 100644
--- a/src/components/EditDeviceForm.tsx
+++ b/src/components/EditDeviceForm.tsx
@@ -101,8 +101,8 @@ const EditDeviceForm: React.FC<EditDeviceFormProps> = ({
           value={gridSize}
           onChange={(e) => setGridSize(Number(e.target.value))}
           required
-          min="10"
-          max="100"
+          min="100"
+          max="2000"
           className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
         />
       </div>