Next.js mit App -Router für export zu statische dateien

app/kabelueberwachung/page.jsx

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import Layout from "../components/Layout";
+
+function Kabelueberwachung() {
+  const [activeTab, setActiveTab] = useState(1);
+
+  const racks = [
+    { id: 1, name: "Rack 1" },
+    { id: 2, name: "Rack 2" },
+    { id: 3, name: "Rack 3" },
+    { id: 4, name: "Rack 4" },
+  ];
+
+  return (
+    <Layout>
+      <div className="bg-gray-100 flex-1 p-4 overflow-hidden">
+        {" "}
+        {/* overflow-hidden hinzugefügt */}
+        {/* Tabs */}
+        <ul className="flex border-b border-gray-200">
+          {racks.map((rack) => (
+            <li
+              key={rack.id}
+              className={`mr-1 ${
+                activeTab === rack.id ? "border-blue-500 text-blue-600" : ""
+              }`}
+            >
+              <button
+                onClick={() => setActiveTab(rack.id)}
+                className={`inline-block px-4 py-2 rounded-t-lg ${
+                  activeTab === rack.id
+                    ? "bg-blue-500 text-white"
+                    : "bg-white text-black hover:bg-gray-200"
+                }`}
+              >
+                {rack.name}
+              </button>
+            </li>
+          ))}
+        </ul>
+        {/* Rack-Inhalte */}
+        <div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto max-h-full">
+          {" "}
+          {/* max-h-full und overflow-auto für Inhalt */}
+          {racks.map(
+            (rack) =>
+              activeTab === rack.id && (
+                <div key={rack.id}>
+                  <h2 className="text-lg font-bold mb-4">
+                    {rack.name} Inhalte
+                  </h2>
+                  {/* Hier kannst du den Inhalt für jedes Rack einfügen */}
+                  <table className="min-w-full bg-white border border-gray-300">
+                    <thead>
+                      <tr className="w-full bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
+                        <th className="py-3 px-4 text-left">Slot</th>
+                        <th className="py-3 px-4 text-left">Bezeichnung</th>
+                        <th className="py-3 px-4 text-center">
+                          Isolationsgrenzwert
+                        </th>
+                        <th className="py-3 px-4 text-center">
+                          Schleifengrenzwert
+                        </th>
+                        <th className="py-3 px-4 text-center">Filterzeit</th>
+                        <th className="py-3 px-4 text-center">Aktionen</th>
+                      </tr>
+                    </thead>
+                    <tbody className="text-gray-600 text-sm">
+                      {Array.from({ length: 8 }, (_, index) => (
+                        <tr key={index} className="border-b border-gray-200">
+                          <td className="py-3 px-4 text-left">
+                            Slot {index + 1}
+                          </td>
+                          <td className="py-3 px-4 text-left">
+                            Beispielbezeichnung
+                          </td>
+                          <td className="py-3 px-4 text-center">0.5 MOhm</td>
+                          <td className="py-3 px-4 text-center">10 kOhm</td>
+                          <td className="py-3 px-4 text-center">5 sek.</td>
+                          <td className="py-3 px-4 text-center">
+                            <button className="bg-blue-500 text-white px-3 py-1 rounded">
+                              Bearbeiten
+                            </button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )
+          )}
+        </div>
+      </div>
+    </Layout>
+  );
+}
+
+export default Kabelueberwachung;