Card über den Map

components/DataSheet.js

@@ -14,7 +14,6 @@ function DataSheet() {
     // Füge hier weitere Stationen hinzu, falls nötig
   ];
 
-  // Initialisiere den Zustand mit allen Stationen als nicht gecheckt (false)
   const [checkedStations, setCheckedStations] = useState(
     stationListing.reduce((acc, station) => {
       acc[station.id] = false;
@@ -40,53 +39,49 @@ function DataSheet() {
   return (
     <div
       id="mainDataSheet"
-      className="absolute top-12 right-3 w-1/6 min-w-[300px] z-10 bg-gray-100 border border-gray-300"
+      className="absolute top-3 right-3 w-1/6 min-w-[300px] z-10 bg-white p-2 rounded-lg shadow-lg"
     >
-      <div className="bg-white shadow rounded-lg overflow-hidden">
-        <div className="bg-gray-200 border-b border-gray-300 p-3">
-          <form>
-            <select
-              onChange={handleStationChange}
-              id="stationListing"
-              className="w-full border-none p-2 rounded"
-            >
-              <option>Station wählen</option>
-              {stationListing.map((station) => (
-                <option key={station.id} value={station.id}>
-                  {station.name}
-                </option>
-              ))}
-            </select>
-          </form>
-          <div className="text-right">
-            <button onClick={resetView} className="p-1 focus:outline-none">
-              <i
-                className="fi-arrows-out text-gray-800 text-lg"
-                title="Ansicht zurücksetzen"
-              ></i>
-            </button>
-          </div>
-        </div>
-        <div className="flex flex-col p-4 gap-2">
-          {stationListing.map((station) => (
-            <div key={station.id} className="flex items-center">
-              <input
-                type="checkbox"
-                id={`box-${station.id}`}
-                className="accent-blue-500 checked:bg-blue-500"
-                checked={checkedStations[station.id]}
-                onChange={() => handleCheckboxChange(station.id)}
-                // Wenn du möchtest, dass die Checkboxen nicht veränderbar sind, entferne den onChange-Handler und setze `readOnly`
-              />
-              <label
-                htmlFor={`box-${station.id}`}
-                className="text-sm font-bold ml-2"
-              >
+      <div className="flex flex-col gap-4 p-4">
+        <div className="flex items-center justify-between ">
+          {/* Dropdown */}
+          <select
+            onChange={handleStationChange}
+            id="stationListing"
+            className="border-solid-1 p-2 rounded ml-1 " // Margin Left für Abstand zum Icon
+          >
+            <option>Station wählen</option>
+            {stationListing.map((station) => (
+              <option key={station.id} value={station.id}>
                 {station.name}
-              </label>
-            </div>
-          ))}
+              </option>
+            ))}
+          </select>
+          {/* Icon */}
+          <img
+            src="/img/expand-icon.svg" // Pfad zu deinem SVG-Bild
+            alt="Expand"
+            className="h-6 w-6 ml-2" // Margin Left für Abstand zum Dropdown
+          />
         </div>
+
+        {/* Liste der Stationen mit Checkboxen */}
+        {stationListing.map((station) => (
+          <div key={station.id} className="flex items-center">
+            <input
+              type="checkbox"
+              id={`box-${station.id}`}
+              className="accent-blue-500 checked:bg-blue-500"
+              checked={checkedStations[station.id]}
+              onChange={() => handleCheckboxChange(station.id)}
+            />
+            <label
+              htmlFor={`box-${station.id}`}
+              className="text-sm font-bold ml-2"
+            >
+              {station.name}
+            </label>
+          </div>
+        ))}
       </div>
     </div>
   );