CPLv4.0/app/einausgaenge/page.jsx

// pages/Einausgaenge.jsx
import React, { useState } from "react";
import Layout from "../components/Layout";

function Einausgaenge() {
  // Beispiel-Daten für Ein- und Ausgänge (kannst du durch deine Daten ersetzen)
  const inputs = [
    {
      id: 1,
      name: "Eingang 1",
      status: "Aktiv",
      description: "Beschreibung 1",
    },
    {
      id: 2,
      name: "Eingang 2",
      status: "Inaktiv",
      description: "Beschreibung 2",
    },
    {
      id: 3,
      name: "Eingang 3",
      status: "Aktiv",
      description: "Beschreibung 3",
    },
    {
      id: 4,
      name: "Eingang 4",
      status: "Inaktiv",
      description: "Beschreibung 4",
    },
  ];

  const outputs = [
    {
      id: 1,
      name: "Ausgang 1",
      status: "Aktiv",
      description: "Beschreibung 1",
    },
    {
      id: 2,
      name: "Ausgang 2",
      status: "Inaktiv",
      description: "Beschreibung 2",
    },
    {
      id: 3,
      name: "Ausgang 3",
      status: "Aktiv",
      description: "Beschreibung 3",
    },
    {
      id: 4,
      name: "Ausgang 4",
      status: "Inaktiv",
      description: "Beschreibung 4",
    },
  ];

  // Zustand für aktiven Tab (Ein- oder Ausgänge)
  const [activeTab, setActiveTab] = useState("inputs");

  return (
    <Layout>
      <div className="bg-gray-100 min-h-screen p-8">
        {/* Tabs für Ein- und Ausgänge */}
        <ul className="flex border-b border-gray-200">
          <li
            className={`mr-1 ${
              activeTab === "inputs" ? "border-blue-500 text-blue-600" : ""
            }`}
          >
            <button
              onClick={() => setActiveTab("inputs")}
              className={`inline-block px-4 py-2 rounded-t-lg ${
                activeTab === "inputs"
                  ? "bg-blue-500 text-white"
                  : "bg-white text-black hover:bg-gray-200"
              }`}
            >
              Eingänge
            </button>
          </li>
          <li
            className={`mr-1 ${
              activeTab === "outputs" ? "border-blue-500 text-blue-600" : ""
            }`}
          >
            <button
              onClick={() => setActiveTab("outputs")}
              className={`inline-block px-4 py-2 rounded-t-lg ${
                activeTab === "outputs"
                  ? "bg-blue-500 text-white"
                  : "bg-white text-black hover:bg-gray-200"
              }`}
            >
              Ausgänge
            </button>
          </li>
        </ul>

        {/* Inhalt für die aktiven Tabs */}
        <div className="mt-4 p-4 bg-white rounded-lg shadow overflow-auto">
          {activeTab === "inputs" && (
            <div>
              <h2 className="text-lg font-bold mb-4">Eingänge</h2>
              <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">ID</th>
                    <th className="py-3 px-4 text-left">Name</th>
                    <th className="py-3 px-4 text-left">Status</th>
                    <th className="py-3 px-4 text-left">Beschreibung</th>
                  </tr>
                </thead>
                <tbody className="text-gray-600 text-sm">
                  {inputs.map((input) => (
                    <tr key={input.id} className="border-b border-gray-200">
                      <td className="py-3 px-4 text-left">{input.id}</td>
                      <td className="py-3 px-4 text-left">{input.name}</td>
                      <td className="py-3 px-4 text-left">{input.status}</td>
                      <td className="py-3 px-4 text-left">
                        {input.description}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}

          {activeTab === "outputs" && (
            <div>
              <h2 className="text-lg font-bold mb-4">Ausgänge</h2>
              <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">ID</th>
                    <th className="py-3 px-4 text-left">Name</th>
                    <th className="py-3 px-4 text-left">Status</th>
                    <th className="py-3 px-4 text-left">Beschreibung</th>
                  </tr>
                </thead>
                <tbody className="text-gray-600 text-sm">
                  {outputs.map((output) => (
                    <tr key={output.id} className="border-b border-gray-200">
                      <td className="py-3 px-4 text-left">{output.id}</td>
                      <td className="py-3 px-4 text-left">{output.name}</td>
                      <td className="py-3 px-4 text-left">{output.status}</td>
                      <td className="py-3 px-4 text-left">
                        {output.description}
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>
    </Layout>
  );
}

export default Einausgaenge;