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

telefonos nezet

Browse Source
This commit is contained in:
mategery
2025-11-18 15:37:29 +01:00
parent 22ea5c43f2
commit 4bcb93d357
14 changed files with 388 additions and 346 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/DeckCreator/DeckHeader.jsx
+51 -38
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, FaTrash } from "react-icons/fa"
import { FaSave, FaArrowLeft, FaGlobe, FaLock, FaQuestionCircle, FaDice, FaLaughBeam, FaTrash, FaChevronDown, FaChevronUp } from "react-icons/fa"
const deckTypes = [
{ value: "QUESTION", label: "Kérdés", icon: FaQuestionCircle, color: "var(--color-question)" },
@@ -18,6 +18,7 @@ const privacyOptions = [
export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete }) {
const [isTypeDropdownOpen, setIsTypeDropdownOpen] = useState(false);
const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);
const typeDropdownRef = useRef(null);
const privacyDropdownRef = useRef(null);
@@ -47,68 +48,78 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete })
// 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">
<div className="bg-[color:var(--color-surface)] border-b border-[color:var(--color-surface-selected)] px-4 sm:px-6 py-3 sm:py-4">
{/* Top Row - Title and Actions */}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-4">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-3 sm:mb-4">
<div className="flex items-center gap-2 sm:gap-4 w-full sm:w-auto">
<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"
className="flex items-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded-lg sm:rounded-xl bg-[color:var(--color-background)] hover:bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] transition-all duration-200 text-sm"
>
<FaArrowLeft />
Vissza
<FaArrowLeft className="text-sm" />
<span className="hidden sm:inline">Vissza</span>
</button>
<h1 className="text-2xl font-bold text-[color:var(--color-text)]">
<h1 className="text-lg sm:text-xl lg:text-2xl font-bold text-[color:var(--color-text)]">
📝 Pakli Szerkesztés
</h1>
</div>
<div className="flex items-center gap-3">
<div className="flex items-center gap-2 sm:gap-3 w-full sm:w-auto">
{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"
className="flex items-center gap-1 sm:gap-2 px-4 sm:px-6 py-2 rounded-lg sm:rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold transition-all duration-200 hover:scale-105 shadow-lg text-sm flex-1 sm:flex-none"
>
<FaTrash />
Törlés
<FaTrash className="text-sm" />
<span className="hidden sm:inline">Törlés</span>
</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"
className="flex items-center justify-center gap-1 sm:gap-2 px-4 sm:px-6 py-2 rounded-lg sm: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 text-sm flex-1 sm:flex-none"
>
<FaSave />
<FaSave className="text-sm" />
Mentés
</button>
</div>
</div>
{/* Main Content Row */}
<div className="space-y-4">
{/* Two Column Layout */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Deck Name - Takes up 2 columns */}
<div className="md:col-span-2">
<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>
{/* Empty space for visual balance */}
<div className="hidden md:block"></div>
</div>
{/* Collapsible Details Section */}
<div className="border-t border-[color:var(--color-surface-selected)] mt-3 sm:mt-4">
<button
onClick={() => setIsDetailsExpanded(!isDetailsExpanded)}
className="w-full flex items-center justify-between px-2 py-2 text-[color:var(--color-text)] hover:bg-[color:var(--color-surface-selected)] transition-colors rounded-lg"
>
<span className="text-sm font-medium">Pakli részletek</span>
{isDetailsExpanded ? <FaChevronUp className="text-sm" /> : <FaChevronDown className="text-sm" />}
</button>
{isDetailsExpanded && (
<div className="space-y-4 px-2 pb-3 pt-2">
{/* Two Column Layout */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* Deck Name - Takes up 2 columns */}
<div className="md:col-span-2">
<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>
{/* Empty space for visual balance */}
<div className="hidden md:block"></div>
</div>
{/* Type, Privacy and Description Row */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
{/* 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">
@@ -226,7 +237,9 @@ export default function DeckHeader({ deck, onUpdate, onSave, onBack, onDelete })
placeholder="Rövid leírás..."
/>
</div>
</div>
</div>
</div>
)}
</div>
</div>
)