8c01dd3fc3
- Layout verbessert: Tabelle und Diagramm jetzt nebeneinander (grid-responsive) - Responsivität optimiert: Kein unnötiges horizontales Scrollen mehr - Diagramm verbessert: - Höhere Lesbarkeit mit stärkeren Linien und Abstand für Achsenbeschriftungen - Anpassung der Höhe und Breite für mobile & große Bildschirme - Tabelle optimiert: - Bessere Lesbarkeit mit größeren Abständen - Hover-Effekte für Zeilen - Dynamisches Spaltenlayout für kleine & große Bildschirme - Code aufgeräumt und verbessert Test auf verschiedenen Bildschirmgrößen erfolgreich!"
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
"use client"; ///pages/analogeEingaenge.tsx
|
|
import React, { useState } from "react";
|
|
import AnalogeEingaengeTabelle from "../components/main/analogeEingaenge/AnalogeEingaengeTable";
|
|
import AnalogInputsChart from "../components/main/analogeEingaenge/AnalogInputsChart";
|
|
|
|
function AnalogeEingaenge() {
|
|
const [activeConfig, setActiveConfig] = useState<number | null>(null);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-100 p-4">
|
|
<div className="container mx-auto">
|
|
{/* Responsive Grid: 1 Spalte auf mobilen Geräten, 2 Spalten auf größeren Geräten */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{/* Tabelle als Card */}
|
|
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
|
|
<h2 className="text-xl font-semibold mb-4 text-gray-700">
|
|
Analoge Eingänge
|
|
</h2>
|
|
<AnalogeEingaengeTabelle />
|
|
</div>
|
|
|
|
{/* Diagramm als Card */}
|
|
<div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
|
|
<h2 className="text-xl font-semibold mb-4 text-gray-700">
|
|
Analog Inputs Chart
|
|
</h2>
|
|
<AnalogInputsChart />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default AnalogeEingaenge;
|