70 lines
1.7 KiB
TypeScript
70 lines
1.7 KiB
TypeScript
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;
|