Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

javitasok-plusz #81

Merged
Donat merged 3 commits from javitasok-plusz into main 2025-10-30 18:43:41 +01:00
Conversation 0 Commits 3 Files Changed 7
+190 -288
7 changed files with 190 additions and 288 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Backend/src/Application/Deck/commands/UpdateDeckCommandHandler.ts
+2 -2
View File
@@ -9,7 +9,7 @@ export class UpdateDeckCommandHandler {
constructor(private readonly deckRepo: IDeckRepository) {}
async execute(cmd: UpdateDeckCommand): Promise<ShortDeckDto | null> {
if(cmd.state !== undefined && cmd.authLevel!==1) {
if(cmd.state !== undefined && cmd.authLevel !== 1) {
throw new Error('Only admin users can change deck state');
}
try {
@@ -24,7 +24,7 @@ export class UpdateDeckCommandHandler {
throw new Error('Deck not found');
}
if(cmd.authLevel !==1 && existingDeck.userid !== cmd.userid) {
if(cmd.authLevel !== 1 && existingDeck.userid !== cmd.userid) {
logAuth(`Unauthorized access attempt to deck with ID: ${cmd.id}, UserID: ${cmd.userid}`);
throw new Error('Unauthorized');
}
SerpentRace_Frontend/src/api/deckApi.js
+12 -1
View File
@@ -40,8 +40,19 @@ export const updateDeck = async (deckId, deck) => {
}
}
// Delete a deck (soft delete) (authenticated)
export const deleteDeck = async (deckId) => {
try {
const response = await apiClient.delete(`/decks/${deckId}`)
return response.data
} catch (err) {
throw err
}
}
export default {
createDeck,
getDeckById,
updateDeck
updateDeck,
deleteDeck
}
SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+21 -9
View File
@@ -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 */}
SerpentRace_Frontend/src/components/DeckCreator/JokerCardEditor.jsx
+2 -138
View File
@@ -4,29 +4,17 @@
import React, { useState, useEffect } from 'react'
import { FaTheaterMasks, FaInfoCircle, FaUsers } from 'react-icons/fa'
const consequenceTypes = [
{ value: 0, label: '⬆️ Előre lépés', description: 'A játékos előre lép X mezőt' },
{ value: 1, label: '⬇️ Hátra lépés', description: 'A játékos hátra lép X mezőt' },
{ value: 2, label: '⏸️ Kör kihagyás', description: 'A játékos kihagy egy kört' },
{ value: 3, label: '⏩ Extra kör', description: 'A játékos kap egy extra kört' },
{ value: 5, label: '🏁 Vissza a starthoz', description: 'A játékos visszakerül a starthoz' }
]
export default function JokerCardEditor({ card, onChange }) {
const [cardData, setCardData] = useState({
type: 'JOKER',
text: '',
consequence: { type: 0, value: 1 },
wrongConsequence: { type: 1, value: 1 }
text: ''
})
useEffect(() => {
if (card) {
setCardData({
type: 'JOKER',
text: card.text || '',
consequence: card.consequence || { type: 0, value: 1 },
wrongConsequence: card.wrongConsequence || { type: 1, value: 1 }
text: card.text || ''
})
}
}, [card])
@@ -43,36 +31,6 @@ export default function JokerCardEditor({ card, onChange }) {
}
}
const updateConsequence = (field, value) => {
const newCardData = {
...cardData,
consequence: {
...cardData.consequence,
[field]: value
}
}
setCardData(newCardData)
if (onChange) {
onChange(newCardData)
}
}
const updateWrongConsequence = (field, value) => {
const newCardData = {
...cardData,
wrongConsequence: {
...cardData.wrongConsequence,
[field]: value
}
}
setCardData(newCardData)
if (onChange) {
onChange(newCardData)
}
}
// Példa joker kártyák
const exampleCards = [
"Felelsz vagy mersz? (Az előző játékos kérdez)",
@@ -186,100 +144,6 @@ export default function JokerCardEditor({ card, onChange }) {
</div>
)}
</div>
{/* Következmények (teljesítés esetén) */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
🎯 Következmények (teljesítés esetén)
</h3>
<div className="space-y-4">
{/* Consequence Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Hatás típusa
</label>
<select
value={cardData.consequence?.type ?? 0}
onChange={(e) => updateConsequence('type', parseInt(e.target.value))}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
>
{consequenceTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (cardData.consequence?.type ?? 0))?.description}
</div>
</div>
{/* Consequence Value - csak ha előre/hátra lépés */}
{(cardData.consequence?.type === 0 || cardData.consequence?.type === 1) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Mezők száma
</label>
<input
type="number"
value={cardData.consequence?.value ?? 1}
onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
min="1"
max="10"
/>
</div>
)}
</div>
</div>
{/* Következmények (nem teljesítés esetén) */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
❌ Következmények (nem teljesítés esetén)
</h3>
<div className="space-y-4">
{/* Wrong Consequence Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Hatás típusa
</label>
<select
value={cardData.wrongConsequence?.type ?? 1}
onChange={(e) => updateWrongConsequence('type', parseInt(e.target.value))}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-danger)] focus:border-transparent outline-none transition-all duration-200"
>
{consequenceTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (cardData.wrongConsequence?.type ?? 1))?.description}
</div>
</div>
{/* Wrong Consequence Value - csak ha előre/hátra lépés */}
{(cardData.wrongConsequence?.type === 0 || cardData.wrongConsequence?.type === 1) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Mezők száma
</label>
<input
type="number"
value={cardData.wrongConsequence?.value ?? 1}
onChange={(e) => updateWrongConsequence('value', parseInt(e.target.value) || 1)}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-danger)] focus:border-transparent outline-none transition-all duration-200"
min="1"
max="10"
/>
</div>
)}
</div>
</div>
</div>
)
}
SerpentRace_Frontend/src/components/DeckCreator/LuckCardEditor.jsx
+7 -4
View File
@@ -150,20 +150,23 @@ export default function LuckCardEditor({ card, onChange }) {
</div>
</div>
{/* Consequence Value - csak ha előre/hátra lépés */}
{(cardData.consequence?.type === 0 || cardData.consequence?.type === 1) && (
{/* Consequence Value - csak kör kihagyás és extra kör */}
{(cardData.consequence?.type === 2 || cardData.consequence?.type === 3) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Mezők száma
{cardData.consequence?.type === 2 ? 'Körök kihagyása' : 'Extra körök száma'}
</label>
<input
type="number"
min="1"
max="10"
max="5"
value={cardData.consequence?.value ?? 1}
onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-luck)] focus:border-transparent outline-none transition-all duration-200"
/>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
Érték: 1-5 között
</div>
</div>
)}
</div>
SerpentRace_Frontend/src/components/DeckCreator/TaskCardEditor.jsx
-122
View File
@@ -20,14 +20,6 @@ const timeLimits = [
{ value: 120, label: '2 perc' }
]
const consequenceTypes = [
{ value: 0, label: '⬆️ Előre lépés', description: 'A játékos előre lép X mezőt' },
{ value: 1, label: '⬇️ Hátra lépés', description: 'A játékos hátra lép X mezőt' },
{ value: 2, label: '⏸️ Kör kihagyás', description: 'A játékos kihagy egy kört' },
{ value: 3, label: '⏩ Extra kör', description: 'A játékos kap egy extra kört' },
{ value: 5, label: '🏁 Vissza a starthoz', description: 'A játékos visszakerül a starthoz' }
]
export default function TaskCardEditor({ card, onChange }) {
const updateField = (field, value) => {
@@ -92,26 +84,6 @@ export default function TaskCardEditor({ card, onChange }) {
onChange({ acceptedAnswers: newAnswers })
}
const updateConsequence = (field, value) => {
const currentConsequence = card.consequence || { type: 0, value: 1 }
onChange({
consequence: {
...currentConsequence,
[field]: value
}
})
}
const updateWrongConsequence = (field, value) => {
const currentWrongConsequence = card.wrongConsequence || { type: 1, value: 1 }
onChange({
wrongConsequence: {
...currentWrongConsequence,
[field]: value
}
})
}
return (
<div className="max-w-4xl mx-auto space-y-6">
{/* Feladat típus választó */}
@@ -544,100 +516,6 @@ export default function TaskCardEditor({ card, onChange }) {
</div>
</div>
</div>
{/* Következmények (helyes válasz esetén) */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
🎯 Következmények (helyes válasz esetén)
</h3>
<div className="space-y-4">
{/* Consequence Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Hatás típusa
</label>
<select
value={card.consequence?.type ?? 0}
onChange={(e) => updateConsequence('type', parseInt(e.target.value))}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
>
{consequenceTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (card.consequence?.type ?? 0))?.description}
</div>
</div>
{/* Consequence Value - csak ha előre/hátra lépés */}
{(card.consequence?.type === 0 || card.consequence?.type === 1) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Mezők száma
</label>
<input
type="number"
value={card.consequence?.value ?? 1}
onChange={(e) => updateConsequence('value', parseInt(e.target.value) || 1)}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-success)] focus:border-transparent outline-none transition-all duration-200"
min="1"
max="10"
/>
</div>
)}
</div>
</div>
{/* Következmények (rossz válasz esetén) */}
<div className="bg-[color:var(--color-surface)] rounded-xl p-6">
<h3 className="text-lg font-semibold text-[color:var(--color-text)] mb-4">
❌ Következmények (rossz válasz esetén)
</h3>
<div className="space-y-4">
{/* Wrong Consequence Type */}
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Hatás típusa
</label>
<select
value={card.wrongConsequence?.type ?? 1}
onChange={(e) => updateWrongConsequence('type', parseInt(e.target.value))}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-danger)] focus:border-transparent outline-none transition-all duration-200"
>
{consequenceTypes.map(type => (
<option key={type.value} value={type.value}>
{type.label}
</option>
))}
</select>
<div className="text-xs text-[color:var(--color-text-muted)] mt-1">
{consequenceTypes.find(t => t.value === (card.wrongConsequence?.type ?? 1))?.description}
</div>
</div>
{/* Wrong Consequence Value - csak ha előre/hátra lépés */}
{(card.wrongConsequence?.type === 0 || card.wrongConsequence?.type === 1) && (
<div>
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
Mezők száma
</label>
<input
type="number"
value={card.wrongConsequence?.value ?? 1}
onChange={(e) => updateWrongConsequence('value', parseInt(e.target.value) || 1)}
className="w-full px-4 py-2 rounded-xl bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] text-[color:var(--color-text)] focus:ring-2 focus:ring-[color:var(--color-danger)] focus:border-transparent outline-none transition-all duration-200"
min="1"
max="10"
/>
</div>
)}
</div>
</div>
</div>
)
}
SerpentRace_Frontend/src/pages/DeckCreator/DeckCreator.jsx
+146 -12
View File
@@ -7,7 +7,7 @@ import Navbar from "../../components/Navbar/Navbar.jsx"
import DeckHeader from "../../components/DeckCreator/DeckHeader.jsx"
import CardsList from "../../components/DeckCreator/CardsList.jsx"
import CardEditor from "../../components/DeckCreator/CardEditor.jsx"
import { createDeck, getDeckById, updateDeck } from '../../api/deckApi'
import { createDeck, getDeckById, updateDeck, deleteDeck } from '../../api/deckApi'
import { notifySuccess, notifyError, notifyWarning } from "../../components/Toastify/toastifyServices"
export default function DeckCreator() {
@@ -29,6 +29,7 @@ export default function DeckCreator() {
const [isCreatingCard, setIsCreatingCard] = useState(false)
const [newCardType, setNewCardType] = useState(null)
const [isLoading, setIsLoading] = useState(false)
const [showDeleteModal, setShowDeleteModal] = useState(false)
// Betöltés API-ból
useEffect(() => {
@@ -66,13 +67,23 @@ export default function DeckCreator() {
2: 'organization'
}
// Process cards: convert type field from number to string
const processedCards = (deckData.cards || []).map(card => {
// A kártya type mezője a deck type-ját tükrözi (backend így küldi)
// Ezért a deck type alapján állítjuk be
return {
...card,
type: typeMapping[deckData.type] || 'QUESTION'
}
})
setDeck({
id: deckData.id,
name: deckData.name || "Névtelen pakli",
type: typeMapping[deckData.type] || 'QUESTION',
privacy: ctypeMapping[deckData.ctype] || 'private',
description: deckData.description || "",
cards: deckData.cards || [],
cards: processedCards,
creationdate: deckData.creationdate,
updatedate: deckData.updatedate
})
@@ -93,6 +104,71 @@ export default function DeckCreator() {
const handleSaveDeck = async () => {
try {
// Szűrjük ki a nem megfelelő típusú kártyákat
const validCards = deck.cards.filter(card => card.type === deck.type)
const invalidCardsCount = deck.cards.length - validCards.length
// Ha voltak érvénytelen kártyák, frissítsük a state-et
if (invalidCardsCount > 0) {
setDeck(prev => ({
...prev,
cards: validCards
}))
// Értesítés a törölt kártyákról
notifyWarning(`${invalidCardsCount} db nem megfelelő típusú kártya törölve a mentés előtt.`)
}
// Tisztítsuk meg a kártyákat - konvertáljuk a backend által várt formátumra
const cleanedCards = validCards.map(card => {
// Card subType mapping to backend CardType enum
const cardTypeMapping = {
'quiz': 0, // QUIZ
'pairing': 1, // SENTENCE_PAIRING
'text': 2, // OWN_ANSWER
'truefalse': 3, // TRUE_FALSE
'closer': 4 // CLOSER
}
// Kezdjük az ID-val (ha van)
const cleanedCard = {}
if (card.id) {
cleanedCard.id = card.id
}
// Ha van subType (QUESTION típusú kártyáknál), akkor add hozzá a type mezőt
if (card.subType && cardTypeMapping[card.subType] !== undefined) {
cleanedCard.type = cardTypeMapping[card.subType]
}
// Text mező - kötelező, különböző forrásokból jöhet
cleanedCard.text = card.text || card.question || card.statement || ""
// Egyéb frontend mezők, amiket a backend is elfogad
if (card.question !== undefined) cleanedCard.question = card.question
if (card.statement !== undefined) cleanedCard.statement = card.statement
if (card.options !== undefined) cleanedCard.options = card.options
if (card.correctAnswer !== undefined) cleanedCard.correctAnswer = card.correctAnswer
if (card.leftItems !== undefined) cleanedCard.leftItems = card.leftItems
if (card.rightItems !== undefined) cleanedCard.rightItems = card.rightItems
if (card.correctPairs !== undefined) cleanedCard.correctPairs = card.correctPairs
if (card.acceptedAnswers !== undefined) cleanedCard.acceptedAnswers = card.acceptedAnswers
if (card.hint !== undefined) cleanedCard.hint = card.hint
// Answer mező (ha van)
if (card.answer !== undefined && card.answer !== null) {
cleanedCard.answer = card.answer
}
// Csak LUCK típusú kártyáknál add hozzá a consequence-t
if (deck.type === 'LUCK' && card.consequence) {
cleanedCard.consequence = card.consequence
}
return cleanedCard
})
// Típus konverzió backendhez
const typeMapping = {
'LUCK': 0,
@@ -110,7 +186,7 @@ export default function DeckCreator() {
name: deck.name?.trim() || "Névtelen pakli",
type: typeMapping[deck.type] ?? 2,
ctype: ctypeMapping[deck.privacy] ?? 1,
cards: deck.cards || []
cards: cleanedCards
}
// Note: description field is not sent to backend as it's not supported yet
@@ -164,6 +240,36 @@ export default function DeckCreator() {
navigate("/decks")
}
const handleDeleteDeck = () => {
if (!deck.id) {
notifyWarning('Nincs mit törölni - a pakli még nincs elmentve!')
return
}
setShowDeleteModal(true)
}
const handleConfirmDelete = async () => {
try {
await deleteDeck(deck.id)
setShowDeleteModal(false)
notifySuccess('Pakli sikeresen törölve!')
navigate('/decks')
} catch (error) {
console.error('Pakli törlési hiba:', error)
const errorMessage = error?.response?.data?.error
|| error?.response?.data?.message
|| error?.message
|| 'Ismeretlen hiba történt'
notifyError('Hiba történt a törlés során: ' + errorMessage)
setShowDeleteModal(false)
}
}
const handleCancelDelete = () => {
setShowDeleteModal(false)
}
const handleCreateCard = (cardType) => {
setNewCardType(cardType)
setIsCreatingCard(true)
@@ -184,17 +290,15 @@ export default function DeckCreator() {
return
}
const defaultConsequence = { type: 0, value: 1 }
const defaultWrongConsequence = { type: 1, value: 1 }
// Alapértelmezett consequence csak LUCK típusú kártyákhoz
const updatedCard = {
...cardData,
id: isCreatingCard ? Date.now() : cardData.id,
consequence: cardData.consequence || defaultConsequence,
...(cardData.type === 'QUESTION' || cardData.type === 'JOKER' || cardData.type === 'PAIRING'
? { wrongConsequence: cardData.wrongConsequence || defaultWrongConsequence }
: {}
)
id: isCreatingCard ? Date.now() : cardData.id
}
// Csak LUCK típusú kártyákhoz add hozzá a consequence-t
if (cardData.type === 'LUCK') {
updatedCard.consequence = cardData.consequence || { type: 0, value: 1 }
}
let wasInvalidCardDeleted = false
@@ -278,6 +382,7 @@ export default function DeckCreator() {
onUpdate={handleDeckUpdate}
onSave={handleSaveDeck}
onBack={handleBack}
onDelete={handleDeleteDeck}
/>
{/* Main Content */}
@@ -313,6 +418,35 @@ export default function DeckCreator() {
</div>
</main>
)}
{/* Delete Confirmation Modal */}
{showDeleteModal && (
<div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50">
<div className="bg-[color:var(--color-surface)] rounded-xl shadow-xl p-6 w-96 text-center animate-fadeIn">
<div className="text-4xl mb-4">🗑️</div>
<h3 className="text-lg font-semibold mb-4 text-[color:var(--color-text)]">
Biztosan törölni szeretnéd a(z) "{deck.name}" paklit?
</h3>
<p className="text-sm text-[color:var(--color-text-muted)] mb-6">
Ez a művelet nem visszavonható!
</p>
<div className="flex justify-center gap-4">
<button
onClick={handleConfirmDelete}
className="bg-red-600 text-white px-6 py-2 rounded-lg hover:bg-red-700 transition font-semibold"
>
Igen, törlöm
</button>
<button
onClick={handleCancelDelete}
className="bg-[color:var(--color-background)] text-[color:var(--color-text)] px-6 py-2 rounded-lg hover:bg-[color:var(--color-surface-selected)] transition"
>
Mégse
</button>
</div>
</div>
</div>
)}
</div>
)
}