Dashbord Tabelle responsive mit flex-grow

components/modules/AnalogeEingaengeComponent.tsx

@@ -1,48 +1,11 @@
 "use client"; // components/modules/AnalogeEingaengeComponent.tsx
 import React, { useState } from "react";
 import { Icon } from "@iconify/react";
-
-interface Input {
-  id: number;
-  value: number;
-  name: string;
-  uW: boolean;
-  uG: boolean;
-  oW: boolean;
-  oG: boolean;
-}
+import { analogInputs } from "../../data/mockdata/analogInputs";
 
 const AnalogeEingaengeComponent = () => {
   const [activeConfig, setActiveConfig] = useState<number | null>(null);
 
-  // Mock-Daten für die analogen Eingänge
-  const inputs = [
-    { id: 1, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    {
-      id: 2,
-      value: 22.91,
-      name: "Feuchtigkeit",
-      uW: true,
-      uG: true,
-      oW: true,
-      oG: false,
-    },
-    { id: 3, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    { id: 4, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    { id: 5, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-    {
-      id: 6,
-      value: 21.0,
-      name: "Temperatur",
-      uW: true,
-      uG: true,
-      oW: false,
-      oG: false,
-    },
-    { id: 7, value: 0, name: "----", uW: true, uG: true, oW: true, oG: true },
-    { id: 8, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
-  ];
-
   return (
     <div className="border rounded-lg shadow-md p-6 bg-white flex flex-col h-full">
       <h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
@@ -63,7 +26,7 @@ const AnalogeEingaengeComponent = () => {
             </tr>
           </thead>
           <tbody>
-            {inputs.map((input) => (
+            {analogInputs.map((input) => (
               <tr key={input.id} className="border-t">
                 <td className="px-2 py-1">{input.id}</td>
                 <td className="px-2 py-1">{input.value}</td>