Deck törlés funkció implementálása modal-lal és consequence értékek finomítása

This commit is contained in:
GitG0r0
2025-10-30 18:25:25 +01:00
parent 46369ed112
commit bfcdd3ec9d
4 changed files with 102 additions and 15 deletions
@@ -2,7 +2,7 @@
// Deck alapadatok szerkesztése és mentés
import React, { useState, useRef, useEffect } from "react"
import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam } from "react-icons/fa"
import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam, FaTrash } from "react-icons/fa"
const deckTypes = [
{ value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
@@ -15,7 +15,7 @@ const privacyOptions = [
{ value: "public", label: "Publikus", icon: FaGlobe }
]
export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete }) {
const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
const typeDropdownRef = useRef(null);
@@ -64,13 +64,25 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
</h1>
</div>
<button
onClick={onSave}
className="flex items-center gap-2 px-6 py-2 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
>
<FaSave />
Mentés
</button>
<div className="flex items-center gap-3">
{deck.id && (
<button
onClick={onDelete}
className="flex items-center gap-2 px-6 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
>
<FaTrash />
Törlés
</button>
)}
<button
onClick={onSave}
className="flex items-center gap-2 px-6 py-2 rounded-xl bg-[color:var(--color-success)] hover:bg-[color:var(--color-success)]/80 text-[color:var(--color-text-inverse)] font-semibold transition-all duration-200 hover:scale-105 shadow-lg"
>
<FaSave />
Mentés
</button>
</div>
</div>
{/* Main Content Row */}