refactor(deck-creator): statisztika panel eltávolítása és layout optimalizálása
- Statisztika panel eltávolítva - Grid elrendezés egyszerűsítve - Felesleges kód eltávolítva - Jobb helykihasználás az űrlap elemeknek
This commit is contained in:
GitG0r0
@@ -44,10 +44,7 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack }) {
|
|||||||
onUpdate({ [field]: value })
|
onUpdate({ [field]: value })
|
||||||
}
|
}
|
||||||
|
|
||||||
const cardsCount = deck.cards?.length || 0
|
// Remove unused card count variables
|
||||||
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 (
|
return (
|
||||||
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-6 py-4">
|
<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>
|
</div>
|
||||||
|
|
||||||
{/* Main Content Row */}
|
{/* Main Content Row */}
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 items-end">
|
<div className="space-y-4">
|
||||||
{/* Deck Basic Info */}
|
{/* Deck Name */}
|
||||||
<div className="lg:col-span-2 space-y-4">
|
<div>
|
||||||
{/* Deck Name */}
|
<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>
|
<div>
|
||||||
<label className="block text-[color:var(--color-text-muted)] text-sm font-medium mb-2">
|
<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>
|
</label>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={deck.name}
|
value={deck.description}
|
||||||
onChange={(e) => handleInputChange('name', e.target.value)}
|
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"
|
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>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user