Einsatz Card

apps/dispatch/app/(dispatch)/_components/toast/ToastCard.tsx

@@ -0,0 +1,69 @@
+import { useState } from "react";
+
+interface ToastCard {
+	id: number;
+	title: string;
+	content: string;
+}
+
+const MapToastCard2 = () => {
+	const [cards, setCards] = useState<ToastCard[]>([]);
+	const [openCardId, setOpenCardId] = useState<number | null>(null);
+
+	const addCard = () => {
+		const newCard: ToastCard = {
+			id: Date.now(),
+			title: `Einsatz #${cards.length + 1}`,
+			content: `Inhalt von Einsatz #${cards.length + 1}.`,
+		};
+		setCards([...cards, newCard]);
+	};
+
+	const removeCard = (id: number) => {
+		setCards(cards.filter((card) => card.id !== id));
+	};
+
+	const toggleCard = (id: number) => {
+		setOpenCardId(openCardId === id ? null : id);
+	};
+
+	return (
+		<div className="absolute top-4 right-4 z-[1000] flex flex-col space-y-4">
+			{/* DEBUG */}
+			<button
+				onClick={addCard}
+				className="mb-4 p-2 bg-blue-500 text-white rounded self-end"
+			>
+				Debug Einsatz
+			</button>
+			{/* DEBUG */}
+			{cards.map((card) => (
+				<div
+					key={card.id}
+					className="collapse collapse-arrow bg-base-100 border-base-300 border w-120 relative"
+				>
+					<input
+						type="checkbox"
+						className="absolute top-0 left-0 opacity-0"
+						checked={openCardId === card.id}
+						onChange={() => toggleCard(card.id)}
+					/>
+					<div className="collapse-title font-semibold flex justify-between items-center">
+						<span>{card.title}</span>
+						<button
+							className="btn btn-sm btn-circle btn-ghost z-10 absolute top-3.5 right-8"
+							onClick={(e) => {
+								removeCard(card.id);
+							}}
+						>
+							✕
+						</button>
+					</div>
+					<div className="collapse-content text-sm">{card.content}</div>
+				</div>
+			))}
+		</div>
+	);
+};
+
+export default MapToastCard2;