106 lines
3.0 KiB
TypeScript
106 lines
3.0 KiB
TypeScript
"use client";
|
||
import { useState, useEffect } from "react";
|
||
import ReactModal from "react-modal";
|
||
import KueEinstellung from "./KueEinstellung";
|
||
import TdrEinstellung from "./TdrEinstellung";
|
||
import Knotenpunkte from "./Knotenpunkte";
|
||
|
||
interface KueModalProps {
|
||
showModal: boolean;
|
||
onClose: () => void;
|
||
slot: number;
|
||
onModulNameChange: (id: string) => void; // NEU!
|
||
}
|
||
|
||
export default function KueModal({ showModal, onClose, slot }: KueModalProps) {
|
||
const [activeTab, setActiveTab] = useState<"kue" | "tdr" | "knoten">("kue");
|
||
|
||
useEffect(() => {
|
||
if (showModal) {
|
||
setActiveTab("kue");
|
||
}
|
||
}, [showModal]);
|
||
|
||
return (
|
||
<ReactModal
|
||
isOpen={showModal}
|
||
onRequestClose={onClose}
|
||
ariaHideApp={false}
|
||
style={{
|
||
overlay: {
|
||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||
zIndex: 100,
|
||
},
|
||
content: {
|
||
top: "50%",
|
||
left: "50%",
|
||
right: "auto",
|
||
bottom: "auto",
|
||
transform: "translate(-50%, -50%)",
|
||
width: "90%",
|
||
maxWidth: "850px",
|
||
padding: "0px",
|
||
border: "none",
|
||
borderRadius: "8px",
|
||
position: "relative",
|
||
},
|
||
}}
|
||
>
|
||
<div className="p-2 flex justify-between items-center rounded-t-md">
|
||
<h2 className="text-base font-bold">Einstellungen – Slot {slot + 1}</h2>
|
||
<button onClick={onClose} className="text-2xl hover:text-gray-200">
|
||
<i className="bi bi-x-circle-fill"></i>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="flex justify-center bg-gray-100 space-x-2 p-2">
|
||
<button
|
||
onClick={() => setActiveTab("kue")}
|
||
className={`px-4 py-1 rounded-t font-bold text-base ${
|
||
activeTab === "kue"
|
||
? "bg-white text-blue-600"
|
||
: "text-gray-500 hover:text-black"
|
||
}`}
|
||
>
|
||
KUE Einstellung
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab("tdr")}
|
||
className={`px-4 py-1 rounded-t font-bold text-sm ${
|
||
activeTab === "tdr"
|
||
? "bg-white text-blue-600"
|
||
: "text-gray-500 hover:text-black"
|
||
}`}
|
||
>
|
||
TDR Einstellung
|
||
</button>
|
||
<button
|
||
onClick={() => setActiveTab("knoten")}
|
||
className={`px-4 py-1 rounded-t font-bold text-sm ${
|
||
activeTab === "knoten"
|
||
? "bg-white text-blue-600"
|
||
: "text-gray-500 hover:text-black"
|
||
}`}
|
||
>
|
||
Knotenpunkte
|
||
</button>
|
||
</div>
|
||
|
||
<div className="p-4 bg-white rounded-b-md max-h-[75vh] overflow-y-auto">
|
||
{activeTab === "kue" && (
|
||
<KueEinstellung
|
||
slot={slot}
|
||
onModulNameChange={(id) => {
|
||
console.log("Modulname geändert:", id);
|
||
}}
|
||
onClose={onClose}
|
||
/>
|
||
)}
|
||
|
||
{activeTab === "tdr" && <TdrEinstellung slot={slot} />}
|
||
{activeTab === "knoten" && <Knotenpunkte slot={slot} />}
|
||
</div>
|
||
</ReactModal>
|
||
);
|
||
}
|