feat: ersetzt Einheit-Select durch Listbox mit littwin-blue Design in AnalogInputsSettingsModal

components/main/analogInputs/AnalogInputsSettingsModal.tsx

@@ -1,6 +1,6 @@
 "use client"; // /components/main/analogeEingaenge/AnalogInputsSettingsModal.tsx
 import React, { useEffect, useState } from "react";
-
+import { Listbox } from "@headlessui/react";
 interface AnalogInput {
   id: number;
   label?: string;
@@ -27,6 +27,7 @@ export default function AnalogInputSettingsModal({
   const [loggerInterval, setLoggerInterval] = useState("9");
   const [unit, setUnit] = useState("V");
   const [isSaving, setIsSaving] = useState(false);
+  const unitOptions = ["V", "mA", "°C", "bar", "%"];
 
   useEffect(() => {
     if (selectedInput && isOpen) {
@@ -175,17 +176,45 @@ export default function AnalogInputSettingsModal({
             <span className="font-normal">Einheit:</span>
           </div>
           <div>
-            <select
-              className="w-full border rounded px-3 py-1 mb-4"
-              value={unit}
-              onChange={(e) => setUnit(e.target.value)}
-            >
-              <option value="V">V</option>
-              <option value="mA">mA</option>
-              <option value="°C">°C</option>
-              <option value="bar">bar</option>
-              <option value="%">%</option>
-            </select>
+            <Listbox value={unit} onChange={setUnit}>
+              <div className="relative w-full">
+                <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm text-gray-900 font-sans">
+                  <span>{unit}</span>
+                  <svg
+                    className="w-5 h-5 text-gray-400"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </Listbox.Button>
+                <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm text-gray-900 font-sans">
+                  {unitOptions.map((opt) => (
+                    <Listbox.Option
+                      key={opt}
+                      value={opt}
+                      className={({ selected, active }) =>
+                        `px-4 py-1 cursor-pointer ${
+                          selected
+                            ? "bg-littwin-blue text-white font-medium"
+                            : active
+                            ? "bg-gray-200"
+                            : "text-gray-900"
+                        }`
+                      }
+                    >
+                      {opt}
+                    </Listbox.Option>
+                  ))}
+                </Listbox.Options>
+              </div>
+            </Listbox>
           </div>
         </div>
         {/* Loggerintervall/Speicherintervall */}