deckcreate-oldal-javitas #62
@@ -44,10 +44,7 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
|
||||
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
|
||||
// Remove unused card count variables
|
||||
|
||||
return (
|
||||
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
|
||||
@@ -77,172 +74,140 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
|
||||
</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 className="space-y-4">
|
||||
{/* Deck Name */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
📦 Pakli 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 pakli nevét..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Type, Privacy and Description 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">
|
||||
📦 Pakli neve
|
||||
🎯 Típus
|
||||
</label>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsTypeDropdownOpen(!isTypeDropdownOpen)}
|
||||
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 flex items-center"
|
||||
style={{
|
||||
paddingLeft: "2.5rem"
|
||||
}}
|
||||
>
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2">
|
||||
{React.createElement(currentDeckType.icon, {
|
||||
style: { color: currentDeckType.color }
|
||||
})}
|
||||
</div>
|
||||
{currentDeckType.label}
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2">
|
||||
<svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isTypeDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isTypeDropdownOpen && (
|
||||
<div
|
||||
className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
|
||||
ref={typeDropdownRef}
|
||||
>
|
||||
{deckTypes.map(type => (
|
||||
<button
|
||||
key={type.value}
|
||||
onClick={() => {
|
||||
handleInputChange('type', type.value);
|
||||
setIsTypeDropdownOpen(false);
|
||||
}}
|
||||
className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.type === type.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
|
||||
>
|
||||
{React.createElement(type.icon, {
|
||||
style: { color: type.color }
|
||||
})}
|
||||
<span>{type.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Privacy */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
👁️ Láthatóság
|
||||
</label>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsPrivacyDropdownOpen(!isPrivacyDropdownOpen)}
|
||||
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 flex items-center"
|
||||
style={{
|
||||
paddingLeft: "2.5rem"
|
||||
}}
|
||||
>
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2">
|
||||
{React.createElement(currentPrivacy.icon, {
|
||||
className: "text-[color:var(--color-text)]"
|
||||
})}
|
||||
</div>
|
||||
{currentPrivacy.label}
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2">
|
||||
<svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isPrivacyDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isPrivacyDropdownOpen && (
|
||||
<div
|
||||
className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
|
||||
ref={privacyDropdownRef}
|
||||
>
|
||||
{privacyOptions.map(option => (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => {
|
||||
handleInputChange('privacy', option.value);
|
||||
setIsPrivacyDropdownOpen(false);
|
||||
}}
|
||||
className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.privacy === option.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
|
||||
>
|
||||
{React.createElement(option.icon, {
|
||||
className: "text-[color:var(--color-text)]"
|
||||
})}
|
||||
<span>{option.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</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.name}
|
||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
||||
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="Add meg a pakli nevét..."
|
||||
placeholder="Rövid leírás..."
|
||||
/>
|
||||
</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>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsTypeDropdownOpen(!isTypeDropdownOpen)}
|
||||
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 flex items-center"
|
||||
style={{
|
||||
paddingLeft: "2.5rem"
|
||||
}}
|
||||
>
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2">
|
||||
{React.createElement(currentDeckType.icon, {
|
||||
style: { color: currentDeckType.color }
|
||||
})}
|
||||
</div>
|
||||
{currentDeckType.label}
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2">
|
||||
<svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isTypeDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isTypeDropdownOpen && (
|
||||
<div
|
||||
className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
|
||||
ref={typeDropdownRef}
|
||||
>
|
||||
{deckTypes.map(type => (
|
||||
<button
|
||||
key={type.value}
|
||||
onClick={() => {
|
||||
handleInputChange('type', type.value);
|
||||
setIsTypeDropdownOpen(false);
|
||||
}}
|
||||
className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.type === type.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
|
||||
>
|
||||
{React.createElement(type.icon, {
|
||||
style: { color: type.color }
|
||||
})}
|
||||
<span>{type.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Privacy */}
|
||||
<div>
|
||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
||||
👁️ Láthatóság
|
||||
</label>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsPrivacyDropdownOpen(!isPrivacyDropdownOpen)}
|
||||
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 flex items-center"
|
||||
style={{
|
||||
paddingLeft: "2.5rem"
|
||||
}}
|
||||
>
|
||||
<div className="absolute left-4 top-1/2 -translate-y-1/2">
|
||||
{React.createElement(currentPrivacy.icon, {
|
||||
className: "text-[color:var(--color-text)]"
|
||||
})}
|
||||
</div>
|
||||
{currentPrivacy.label}
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2">
|
||||
<svg className={`w-4 h-4 text-[color:var(--color-text-muted)] transform transition-transform ${isPrivacyDropdownOpen ? 'rotate-180' : ''}`} viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fillRule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{isPrivacyDropdownOpen && (
|
||||
<div
|
||||
className="absolute z-10 w-full mt-1 bg-[color:var(--color-background)] border border-[color:var(--color-surface-selected)] rounded-xl shadow-lg overflow-hidden"
|
||||
ref={privacyDropdownRef}
|
||||
>
|
||||
{privacyOptions.map(option => (
|
||||
<button
|
||||
key={option.value}
|
||||
onClick={() => {
|
||||
handleInputChange('privacy', option.value);
|
||||
setIsPrivacyDropdownOpen(false);
|
||||
}}
|
||||
className={`w-full px-4 py-2 flex items-center gap-3 hover:bg-[color:var(--color-surface-selected)] transition-colors text-[color:var(--color-text)] ${deck.privacy === option.value ? 'bg-[color:var(--color-surface-selected)]' : ''}`}
|
||||
>
|
||||
{React.createElement(option.icon, {
|
||||
className: "text-[color:var(--color-text)]"
|
||||
})}
|
||||
<span>{option.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</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