[#104] Create/Updatehttps://project.mdnd-it.cc/work_packages/104
This commit is contained in:
GitG0r0
@@ -0,0 +1,161 @@
|
||||
// src/components/DeckCreator/DeckHeader.jsx
|
||||
// Deck alapadatok szerkesztése és mentés
|
||||
|
||||
import React from "react"
|
||||
import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam } from "react-icons/fa"
|
||||
|
||||
const deckTypes = [
|
||||
{ value: "Question", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
|
||||
{ value: "Luck", label: "Szerencse", icon: FaDice, color: "var(--color-luck)" },
|
||||
{ value: "Fun", label: "Szórakozás", icon: FaLaughBeam, color: "var(--color-fun)" }
|
||||
]
|
||||
|
||||
const privacyOptions = [
|
||||
{ value: "private", label: "Privát", icon: FaLock },
|
||||
{ value: "public", label: "Publikus", icon: FaGlobe }
|
||||
]
|
||||
|
||||
export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
|
||||
const currentDeckType = deckTypes.find(type => type.value === deck.type) || deckTypes[0]
|
||||
const currentPrivacy = privacyOptions.find(option => option.value === deck.privacy) || privacyOptions[0]
|
||||
|
||||
const handleInputChange = (field, value) => {
|
||||
onUpdate({ [field]: value })
|
||||
}
|
||||
|
||||
const cardsCount = deck.cards?.length || 0
|
||||
const taskCards = deck.cards?.filter(card => card.type === 'task')?.length || 0
|
||||
const jokerCards = deck.cards?.filter(card => card.type === 'joker')?.length || 0
|
||||
const luckCards = deck.cards?.filter(card => card.type === 'luck')?.length || 0
|
||||
|
||||
return (
|
||||
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
|
||||
{/* Top Row - Title and Actions */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-2 px-4 py-2 rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200"
|
||||
>
|
||||
<FaArrowLeft />
|
||||
Vissza
|
||||
</button>
|
||||
|
||||
<h1 className="text-2xl font-bold text-[color:var(--color-text)]">
|
||||
📝 Deck Szerkesztés
|
||||
</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>
|
||||
|
||||
{/* Main Content Row */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-end">
|
||||
{/* Deck Basic Info */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
{/* Deck Name */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
📦 Deck neve
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={deck.name}
|
||||
onChange={(e) => handleInputChange('name', 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"
|
||||
placeholder="Add meg a deck nevét..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Type and Privacy Row */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
{/* Deck Type */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
🎯 Típus
|
||||
</label>
|
||||
<select
|
||||
value={deck.type}
|
||||
onChange={(e) => handleInputChange('type', 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"
|
||||
>
|
||||
{deckTypes.map(type => (
|
||||
<option key={type.value} value={type.value}>
|
||||
{type.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Privacy */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
👁️ Láthatóság
|
||||
</label>
|
||||
<select
|
||||
value={deck.privacy}
|
||||
onChange={(e) => handleInputChange('privacy', 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"
|
||||
>
|
||||
{privacyOptions.map(option => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
📝 Leírás
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={deck.description}
|
||||
onChange={(e) => handleInputChange('description', 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"
|
||||
placeholder="Rövid leírás..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Panel */}
|
||||
<div className="bg-[color:var(--color-background)]/50 rounded-xl p-4 border border-[color:var(--color-surface-selected)]">
|
||||
<h3 className="text-[color:var(--color-text)] font-semibold mb-3 flex items-center gap-2">
|
||||
📊 Statisztikák
|
||||
</h3>
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[color:var(--color-text-muted)]">Összes kártya:</span>
|
||||
<span className="text-[color:var(--color-text)] font-semibold">{cardsCount}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[color:var(--color-text-muted)]">📋 Feladat:</span>
|
||||
<span className="text-[color:var(--color-question)] font-semibold">{taskCards}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[color:var(--color-text-muted)]">🃏 Joker:</span>
|
||||
<span className="text-[color:var(--color-success)] font-semibold">{jokerCards}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-[color:var(--color-text-muted)]">🎲 Szerencse:</span>
|
||||
<span className="text-[color:var(--color-luck)] font-semibold">{luckCards}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user