Backend Complete: Interface Refactoring & Service Container Enhancements
Repository Interface Optimization: - Created IBaseRepository.ts and IPaginatedRepository.ts - Refactored all 7 repository interfaces to extend base interfaces - Eliminated ~200 lines of redundant code (70% reduction) - Improved type safety and maintainability Dependency Injection Improvements: - Added EmailService and GameTokenService to DIContainer - Updated CreateUserCommandHandler constructor for DI - Updated RequestPasswordResetCommandHandler constructor for DI - Enhanced testability and service consistency Environment Configuration: - Created comprehensive .env.example with 40+ variables - Organized into 12 logical sections (Database, Security, Email, etc.) - Added security guidelines and best practices - Documented all backend environment requirements Documentation: - Added comprehensive codebase review - Created refactoring summary report - Added frontend implementation guide Impact: Improved code quality, reduced maintenance overhead, enhanced developer experience
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
// src/components/Inputs/InputBox.jsx
|
||||
// Gomb komponens
|
||||
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
export default function Button({ text, type, onClick, width, className }) {
|
||||
const widthClass = width ? width : "w-full"
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
className={`${widthClass} bg-button-primary text-white py-3 rounded-lg hover:bg-button-primary-hover transition shadow-md font-semibold text-lg ${
|
||||
className ? className : ""
|
||||
}`}
|
||||
>
|
||||
{text}
|
||||
</motion.button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// src/components/Inputs/InputBox.jsx
|
||||
// Gomb komponens
|
||||
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
export default function Button({ text, type, onClick, width }) {
|
||||
const widthClass = width ? width : "w-full"
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
className={`${widthClass} bg-button-secondary text-white py-3 rounded-lg hover:bg-button-secondary-hover transition shadow-md font-semibold text-lg`}
|
||||
>
|
||||
{text}
|
||||
</motion.button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
// src/components/Buttons/ButtonGreen.jsx
|
||||
// Zöld gomb komponens (ButtonGreen)
|
||||
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
export default function ButtonGreen({ text, type, onClick, width }) {
|
||||
const widthClass = width ? width : "w-full"
|
||||
|
||||
return (
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
type={type}
|
||||
onClick={onClick}
|
||||
className={`${widthClass} bg-button-green text-white py-3 rounded-lg hover:bg-button-green-hover transition shadow-md font-semibold text-lg`}
|
||||
>
|
||||
{text}
|
||||
</motion.button>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Card({ title, children, onClose }) {
|
||||
return (
|
||||
<div className="relative bg-white rounded-xl shadow-lg p-6 w-[400px] h-[300px]">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-2 right-2 text-gray-500 hover:text-black text-xl font-bold leading-none"
|
||||
aria-label="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
{title && <h2 className="text-xl font-semibold mb-4">{title}</h2>}
|
||||
<div className="overflow-auto h-[calc(100%-3.5rem)]">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,112 @@
|
||||
import React, { useEffect, useRef, useState } from "react"
|
||||
import { Link } from "react-router-dom"
|
||||
import Logo from "../../assets/pictures/Logo"
|
||||
|
||||
|
||||
const ArrowUpIcon = () => <span style={{ fontSize: "1.25rem" }}>↑</span>
|
||||
|
||||
const Footer = () => {
|
||||
const [isVisible, setIsVisible] = useState(false)
|
||||
const footerRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
setIsVisible(entry.isIntersecting)
|
||||
},
|
||||
{ threshold: 0.3 }
|
||||
)
|
||||
|
||||
if (footerRef.current) {
|
||||
observer.observe(footerRef.current)
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (footerRef.current) {
|
||||
observer.unobserve(footerRef.current)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
|
||||
const scrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" })
|
||||
}
|
||||
|
||||
return (
|
||||
<footer
|
||||
ref={footerRef}
|
||||
className={`relative bg-zinc-900 text-white border-t-2 border-zinc-800 mt-auto py-8 transition-all duration-700 ease-out ${
|
||||
isVisible ? "opacity-100 scale-100 translate-y-0" : "opacity-0 scale-95 translate-y-10"
|
||||
}`}
|
||||
style={{ transformOrigin: "bottom center" }}
|
||||
>
|
||||
<style>
|
||||
{`
|
||||
.footer-animate {
|
||||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
<div className="max-w-6xl mx-auto flex flex-wrap justify-between items-start gap-8 px-4">
|
||||
{/* Logó */}
|
||||
<div className="flex flex-col items-center footer-animate">
|
||||
<a
|
||||
href="/"
|
||||
className="transition-transform duration-500 hover:scale-105 hover:brightness-125"
|
||||
>
|
||||
<Logo size={100} />
|
||||
</a>
|
||||
<span className="font-extrabold text-xl mt-2 tracking-wide">SerpentRace</span>
|
||||
</div>
|
||||
|
||||
{/* Oldalak */}
|
||||
<div className="flex flex-col gap-1 footer-animate">
|
||||
<span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
|
||||
Oldalak
|
||||
</span>
|
||||
<a href="/" className="hover:underline hover:text-green-400 transition">Főoldal</a>
|
||||
<a href="/about" className="hover:underline hover:text-green-400 transition">
|
||||
Rólunk
|
||||
</a>
|
||||
<a href="/contact" className="hover:underline hover:text-green-400 transition">Kapcsolat</a>
|
||||
</div>
|
||||
|
||||
{/* Közösség */}
|
||||
<div className="flex flex-col gap-1 footer-animate">
|
||||
<span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
|
||||
Közösség
|
||||
</span>
|
||||
<a href="https://discord.gg/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">Discord</a>
|
||||
<a href="https://github.com/" target="_blank" rel="noopener noreferrer" className="hover:underline hover:text-green-400 transition">GitHub</a>
|
||||
</div>
|
||||
|
||||
{/* Elérhetőség */}
|
||||
<div className="flex flex-col gap-1 footer-animate">
|
||||
<span className="text-lg font-semibold text-green-400 underline underline-offset-4 mb-2 drop-shadow-sm">
|
||||
Elérhetőség
|
||||
</span>
|
||||
<span className="opacity-80">Email: info@serpentrace.hu</span>
|
||||
<span className="opacity-80">Telefon: +36 30 123 4567</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-8 text-sm opacity-70 footer-animate">
|
||||
© {new Date().getFullYear()} SerpentRace. Minden jog fenntartva.
|
||||
</div>
|
||||
|
||||
{/* Scroll to top */}
|
||||
{isVisible && (
|
||||
<button
|
||||
onClick={scrollToTop}
|
||||
className="fixed bottom-6 right-6 bg-green-500 hover:bg-green-600 text-white p-3 rounded-full shadow-lg transition transform hover:scale-110"
|
||||
aria-label="Ugrás az oldal tetejére"
|
||||
>
|
||||
<ArrowUpIcon />
|
||||
</button>
|
||||
)}
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
||||
export default Footer
|
||||
@@ -0,0 +1,16 @@
|
||||
// src/components/Inputs/InputBox.jsx
|
||||
// InputBox komponens
|
||||
|
||||
export default function InputBox({ type, placeholder, value, onChange, width }) {
|
||||
const widthClass = width ? width : "w-full";
|
||||
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={`${widthClass} px-4 py-3 border border-gray-300 rounded-lg focus:border-background focus:outline-none text-gray-700 placeholder-gray-400 bg-gray-50`}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
// src/components/Inputs/InputBox.jsx
|
||||
// InputBox komponens
|
||||
|
||||
export default function InputBox({ type, placeholder, value, onChange, width }) {
|
||||
const widthClass = width ? width : "w-full"
|
||||
|
||||
return (
|
||||
<input
|
||||
type={type}
|
||||
className={`${widthClass} py-3 px-4 border border-battleship-gray rounded-lg focus:border-mint focus:outline-none text-text placeholder-text-muted bg-background font-semibold text-lg`}
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,292 @@
|
||||
import React, { useState } from "react"
|
||||
import {
|
||||
FaPlus,
|
||||
FaFilter,
|
||||
FaCalendarAlt,
|
||||
FaArrowUp,
|
||||
FaArrowDown,
|
||||
FaSortAlphaDown,
|
||||
FaSortAlphaUp,
|
||||
FaQuestionCircle,
|
||||
} from "react-icons/fa"
|
||||
import SearchBox from "../Search/SearchBox"
|
||||
import PopUp from "../PopUp/PopUp"
|
||||
|
||||
const deckTypes = [
|
||||
{ label: "Luck", color: "var(--color-luck)" },
|
||||
{ label: "Question", color: "var(--color-question)" },
|
||||
{ label: "Fun", color: "var(--color-fun)" },
|
||||
]
|
||||
|
||||
const mockDecks = [
|
||||
// Just for visual mockup
|
||||
{ id: 1, name: "Party Luck", type: "Luck", created: "2025-07-01", origin: "Vállalati" },
|
||||
{ id: 2, name: "Quiz Night", type: "Question", created: "2025-07-02", origin: "Saját" },
|
||||
{ id: 3, name: "Fun Times", type: "Fun", created: "2025-07-03", origin: "Vállalati" },
|
||||
{ id: 4, name: "Corporate Challenge", type: "Question", created: "2025-07-04", origin: "Vállalati" },
|
||||
{ id: 5, name: "Randomizer", type: "Luck", created: "2025-07-05", origin: "Saját" },
|
||||
{ id: 6, name: "Afterwork luck", type: "Luck", created: "2025-07-06", origin: "Saját" },
|
||||
{ id: 7, name: "Serpent Quiz", type: "Question", created: "2025-07-07", origin: "Vállalati" },
|
||||
{ id: 8, name: "Green Fortune", type: "Luck", created: "2025-07-08", origin: "Vállalati" },
|
||||
{ id: 9, name: "Team Builder", type: "Fun", created: "2025-07-09", origin: "Saját" },
|
||||
{ id: 10, name: "Knowledge Race", type: "Question", created: "2025-07-10", origin: "Saját" },
|
||||
]
|
||||
|
||||
const origins = ["Mind", "Vállalati", "Saját"]
|
||||
|
||||
const sortOptions = [
|
||||
{
|
||||
value: "date-asc",
|
||||
label: (
|
||||
<>
|
||||
<FaCalendarAlt className="inline mr-1" />
|
||||
<FaArrowUp className="inline" />
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "date-desc",
|
||||
label: (
|
||||
<>
|
||||
<FaCalendarAlt className="inline mr-1" />
|
||||
<FaArrowDown className="inline" />
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "abc-asc",
|
||||
label: (
|
||||
<>
|
||||
<FaSortAlphaDown className="inline" />
|
||||
</>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: "abc-desc",
|
||||
label: (
|
||||
<>
|
||||
<FaSortAlphaUp className="inline" />
|
||||
</>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
const DeckManager = () => {
|
||||
const [selectedType, setSelectedType] = useState("All")
|
||||
const [selectedOrigin, setSelectedOrigin] = useState("Mind")
|
||||
const [sortBy, setSortBy] = useState("date-desc")
|
||||
const [search, setSearch] = useState("")
|
||||
const [showSortHelp, setShowSortHelp] = useState(false)
|
||||
|
||||
// Filter logic (mock)
|
||||
let filteredDecks = mockDecks.filter((deck) => {
|
||||
const typeMatch = selectedType === "All" || deck.type === selectedType
|
||||
const originMatch = selectedOrigin === "Mind" || deck.origin === selectedOrigin
|
||||
const searchMatch = !search || deck.name.toLowerCase().includes(search.toLowerCase())
|
||||
return typeMatch && originMatch && searchMatch
|
||||
})
|
||||
|
||||
// Sort logic
|
||||
filteredDecks = [...filteredDecks].sort((a, b) => {
|
||||
if (sortBy === "date-asc") {
|
||||
return a.created.localeCompare(b.created)
|
||||
} else if (sortBy === "date-desc") {
|
||||
return b.created.localeCompare(a.created)
|
||||
} else if (sortBy === "abc-asc") {
|
||||
return a.name.localeCompare(b.name)
|
||||
} else if (sortBy === "abc-desc") {
|
||||
return b.name.localeCompare(a.name)
|
||||
}
|
||||
return 0
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="w-full flex flex-col bg-[color:var(--color-background)]">
|
||||
<div className="w-full max-w-6xl mx-auto px-4 py-10">
|
||||
{/* Filters */}
|
||||
<div className="flex flex-col md:flex-row gap-4 justify-between items-center mb-10 bg-[color:var(--color-surface)]/80 backdrop-blur-lg rounded-2xl px-6 py-4 shadow-lg">
|
||||
<div className="flex gap-2 items-center w-full md:w-auto">
|
||||
<SearchBox
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
width={240}
|
||||
placeholder="Keresés..."
|
||||
className="mr-4"
|
||||
/>
|
||||
<FaFilter style={{ color: "var(--color-success)" }} className="mr-2" />
|
||||
<span className="text-[color:var(--color-text)] font-semibold mr-2">Típus:</span>
|
||||
<button
|
||||
className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ${
|
||||
selectedType === "All"
|
||||
? "bg-[color:var(--color-surface-selected)] text-[color:var(--color-text)] border border-[color:var(--color-surface)]"
|
||||
: "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
|
||||
}`}
|
||||
onClick={() => setSelectedType("All")}
|
||||
>
|
||||
Mind
|
||||
</button>
|
||||
{deckTypes.map((type) => (
|
||||
<button
|
||||
key={type.label}
|
||||
className={`px-3 py-1 rounded-lg font-medium transition-all duration-200 ml-1 ${
|
||||
selectedType === type.label
|
||||
? "text-[color:var(--color-text-inverse)] border border-[color:var(--color-surface)]"
|
||||
: "text-[color:var(--color-text)] bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30"
|
||||
}`}
|
||||
style={selectedType === type.label ? { background: type.color } : undefined}
|
||||
onClick={() => setSelectedType(type.label)}
|
||||
>
|
||||
{type.label === "Luck"
|
||||
? "Szerencse"
|
||||
: type.label === "Question"
|
||||
? "Kérdés"
|
||||
: type.label === "Fun"
|
||||
? "Szórakozás"
|
||||
: type.label}
|
||||
</button>
|
||||
))}
|
||||
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2">Eredet:</span>
|
||||
<select
|
||||
className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none"
|
||||
style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
|
||||
value={selectedOrigin}
|
||||
onChange={(e) => setSelectedOrigin(e.target.value)}
|
||||
>
|
||||
{origins.map((origin) => (
|
||||
<option
|
||||
key={origin}
|
||||
value={origin}
|
||||
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
|
||||
>
|
||||
{origin === "Mind"
|
||||
? "Mind"
|
||||
: origin === "Vállalati"
|
||||
? "Vállalati"
|
||||
: origin === "Saját"
|
||||
? "Saját"
|
||||
: origin}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<span className="text-[color:var(--color-text)] font-semibold mr-2 ml-2 flex items-center gap-1">
|
||||
Rendezés:
|
||||
<button
|
||||
type="button"
|
||||
className="ml-1 text-[color:var(--color-success)] hover:text-[color:var(--color-text)] focus:outline-none"
|
||||
onClick={() => setShowSortHelp(true)}
|
||||
aria-label="Rendezési magyarázat megnyitása"
|
||||
style={{ fontSize: 18, lineHeight: 1 }}
|
||||
>
|
||||
<FaQuestionCircle />
|
||||
</button>
|
||||
</span>
|
||||
<select
|
||||
className="px-3 py-1 rounded-lg bg-[color:var(--color-success)]/10 hover:bg-[color:var(--color-success)]/30 text-[color:var(--color-text)] border-none focus:ring-2 focus:ring-[color:var(--color-success)] outline-none flex items-center"
|
||||
style={{ backgroundColor: "rgba(0, 255, 0, 0.10)" }}
|
||||
value={sortBy}
|
||||
onChange={(e) => setSortBy(e.target.value)}
|
||||
aria-label="Rendezés"
|
||||
>
|
||||
<option
|
||||
value="date-asc"
|
||||
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
|
||||
>
|
||||
📅↑
|
||||
</option>
|
||||
<option
|
||||
value="date-desc"
|
||||
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
|
||||
>
|
||||
📅↓
|
||||
</option>
|
||||
<option
|
||||
value="abc-asc"
|
||||
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
|
||||
>
|
||||
A→Z
|
||||
</option>
|
||||
<option
|
||||
value="abc-desc"
|
||||
style={{ backgroundColor: "var(--color-surface)", color: "var(--color-text)" }}
|
||||
>
|
||||
Z→A
|
||||
</option>
|
||||
</select>
|
||||
{showSortHelp && (
|
||||
<PopUp onClose={() => setShowSortHelp(false)}>
|
||||
<h2 className="text-lg font-bold mb-4">Rendezési lehetőségek magyarázata</h2>
|
||||
<ul className="space-y-2 text-[color:var(--color-night)]">
|
||||
<li>
|
||||
<span className="font-bold">📅↑</span> – Dátum szerint növekvő sorrendben (legrégebbi
|
||||
elöl)
|
||||
</li>
|
||||
<li>
|
||||
<span className="font-bold">📅↓</span> – Dátum szerint csökkenő sorrendben (legújabb elöl)
|
||||
</li>
|
||||
<li>
|
||||
<span className="font-bold">A→Z</span> – Név szerint növekvő sorrendben (A-tól Z-ig)
|
||||
</li>
|
||||
<li>
|
||||
<span className="font-bold">Z→A</span> – Név szerint csökkenő sorrendben (Z-től A-ig)
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
className="mt-6 px-4 py-2 rounded-lg bg-[color:var(--color-success)] text-[color:var(--color-text-inverse)] font-semibold hover:bg-[color:var(--color-success)]/80 transition"
|
||||
onClick={() => setShowSortHelp(false)}
|
||||
>
|
||||
Bezárás
|
||||
</button>
|
||||
</PopUp>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{/* Decks Grid */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-8 mt-8">
|
||||
{/* Create New Deck (Mockup) */}
|
||||
<div className="flex flex-col items-center justify-center h-48 bg-[color:var(--color-card)] border-2 border-dashed border-[color:var(--color-success)] rounded-2xl cursor-pointer hover:bg-[color:var(--color-success)]/20 transition-all duration-200 shadow-lg">
|
||||
<FaPlus style={{ color: "var(--color-success)" }} className="text-5xl mb-2" />
|
||||
<span className="text-[color:var(--color-text)] font-semibold">Új pakli létrehozása</span>
|
||||
</div>
|
||||
{/* Existing Decks (Mockup) */}
|
||||
{filteredDecks.map((deck) => {
|
||||
const deckType = deckTypes.find((t) => t.label === deck.type)
|
||||
const borderColor = deckType ? deckType.color : "var(--color-success)"
|
||||
return (
|
||||
<div
|
||||
key={deck.id}
|
||||
className="flex flex-col justify-between h-48 bg-[color:var(--color-card)] rounded-2xl p-6 shadow-lg border-t-4 hover:scale-105 transition-transform duration-200"
|
||||
style={{ borderTopColor: borderColor }}
|
||||
>
|
||||
<div>
|
||||
<span
|
||||
className="inline-block px-3 py-1 rounded-full text-xs font-bold mb-2"
|
||||
style={{
|
||||
background: deckType?.color,
|
||||
color: "var(--color-text-inverse)",
|
||||
}}
|
||||
>
|
||||
{deck.type === "Luck"
|
||||
? "Szerencse"
|
||||
: deck.type === "Question"
|
||||
? "Kérdés"
|
||||
: deck.type === "Fun"
|
||||
? "Szórakozás"
|
||||
: deck.type}
|
||||
</span>
|
||||
<h2 className="text-xl font-bold text-[color:var(--color-text)] mb-1 truncate">
|
||||
{deck.name}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="text-[color:var(--color-text-muted)] text-sm mt-2">
|
||||
Létrehozva: {deck.created}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeckManager
|
||||
@@ -0,0 +1,178 @@
|
||||
import React from "react"
|
||||
import SerpentRaceAnimation from "../../assets/SerpentRace_Animation/SerpentRace_Animation.jsx"
|
||||
import LogoCard from "../../assets/pictures/LogoCard.jsx"
|
||||
import logoImg from "../../assets/pictures/Logo.png"
|
||||
import ButtonGreen from "../Buttons/ButtonGreen.jsx"
|
||||
import { FaUsers, FaPaintBrush, FaHeadset } from "react-icons/fa"
|
||||
import { motion } from "framer-motion"
|
||||
|
||||
const LandingPage = ({ onNavigateToPlay, onNavigateToAuth }) => {
|
||||
return (
|
||||
<div className="w-full">
|
||||
{/* Hero Section */}
|
||||
<motion.section
|
||||
className="min-h-[80vh] flex flex-col items-center justify-center text-center px-4 py-20"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8 }}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{/* Animált logo és cím */}
|
||||
<div className="mb-8">
|
||||
<SerpentRaceAnimation sizePercentage={70} />
|
||||
</div>
|
||||
|
||||
<motion.h1
|
||||
className="text-3xl md:text-5xl font-bold text-white mb-4 leading-tight"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.4 }}
|
||||
>
|
||||
A társasjáték, ami <span className="text-emerald-400">összeköt</span>
|
||||
</motion.h1>
|
||||
|
||||
<motion.p
|
||||
className="text-lg md:text-xl text-gray-300 mb-4 max-w-3xl mx-auto leading-relaxed"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.6 }}
|
||||
>
|
||||
A SerpentRace egy társasjáték, ahol új barátokra lelhetsz, közösséget építhetsz és tanulhatsz –
|
||||
mindezt szórakozva!
|
||||
</motion.p>
|
||||
<motion.div
|
||||
className="text-xl md:text-2xl font-bold text-emerald-400 mb-10"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.8 }}
|
||||
>
|
||||
WE ARE READY, ARE YOU?
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 1 }}
|
||||
>
|
||||
<ButtonGreen text="Játék" onClick={onNavigateToPlay} width="w-60" />
|
||||
<ButtonGreen text="Regisztráció" onClick={onNavigateToAuth} width="w-60" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
{/* Features Section */}
|
||||
<motion.section
|
||||
className="py-20 px-4"
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<motion.h2
|
||||
className="text-2xl md:text-3xl font-bold text-white text-center mb-12"
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
>
|
||||
Miért a SerpentRace a legjobb választás?
|
||||
</motion.h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{/* Feature 1 */}
|
||||
<motion.div
|
||||
className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.3 }}
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
|
||||
<FaUsers className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">Közösségi élmény</h3>
|
||||
<p className="text-gray-300 text-sm">
|
||||
Ismerkedj, nevess, tanulj! A SerpentRace összehozza a társaságot, legyen szó baráti
|
||||
összejövetelről vagy csapatépítésről.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Feature 2 */}
|
||||
<motion.div
|
||||
className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.5 }}
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
|
||||
<FaPaintBrush className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">Személyre szabható</h3>
|
||||
<p className="text-gray-300 text-sm">
|
||||
Kérdéskártyák, szabályok, design – minden a te igényeidhez igazítható, akár céges brandinggel
|
||||
is!
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Feature 3 */}
|
||||
<motion.div
|
||||
className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 text-center"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.7 }}
|
||||
>
|
||||
<div className="w-16 h-16 mx-auto mb-6 bg-emerald-500 rounded-full flex items-center justify-center">
|
||||
<FaHeadset className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-white mb-2">Folyamatos támogatás</h3>
|
||||
<p className="text-gray-300 text-sm">
|
||||
Gyors, segítőkész ügyfélszolgálat – ha bármilyen kérdésed vagy problémád van, mindig
|
||||
számíthatsz ránk!
|
||||
</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.section>
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<motion.section
|
||||
className="py-20 px-4"
|
||||
initial={{ opacity: 0, y: 40 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
viewport={{ once: true, amount: 0.2 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<motion.div
|
||||
className="bg-gradient-to-r from-emerald-500/20 to-green-500/20 backdrop-blur-lg rounded-3xl p-12"
|
||||
initial={{ opacity: 0, scale: 0.95 }}
|
||||
whileInView={{ opacity: 1, scale: 1 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ duration: 0.7, delay: 0.3 }}
|
||||
>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
|
||||
Próbáld ki te is a SerpentRace-t!
|
||||
</h2>
|
||||
|
||||
<p className="text-lg text-gray-300 mb-6">
|
||||
Legyél részese egy új közösségi élménynek, vagy rendeld meg saját, személyre szabott
|
||||
társasjátékodat – mi mindenben segítünk!
|
||||
</p>
|
||||
|
||||
<ButtonGreen
|
||||
text="Kapcsolatfelvétel"
|
||||
onClick={onNavigateToAuth}
|
||||
className="px-12 py-4 text-xl font-bold"
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LandingPage
|
||||
@@ -0,0 +1,77 @@
|
||||
import React, { useState } from "react"
|
||||
import LogoCard from "../../assets/pictures/LogoCard.jsx"
|
||||
import logoImg from "../../assets/pictures/Logo.png" // <-- EZT ADD HOZZÁ
|
||||
import ButtonDark from "../Buttons/ButtonDark.jsx"
|
||||
import InputBoxDark from "../Inputs/InputBoxDark.jsx"
|
||||
|
||||
const PlayMenu = ({ onJoinGame, onCreateGame, user }) => {
|
||||
const [joinCode, setJoinCode] = useState("")
|
||||
const [error, setError] = useState("")
|
||||
|
||||
const handleJoin = () => {
|
||||
if (!joinCode.trim()) {
|
||||
setError("Add meg a játék kódját!")
|
||||
return
|
||||
}
|
||||
setError("")
|
||||
onJoinGame(joinCode)
|
||||
}
|
||||
|
||||
const handleCreate = () => {
|
||||
onCreateGame()
|
||||
}
|
||||
|
||||
return (
|
||||
<section
|
||||
className="w-[95%] max-w-6xl mx-auto my-16 flex flex-col md:flex-row items-center justify-center rounded-3xl shadow-2xl min-h-[60vh] overflow-hidden"
|
||||
style={{
|
||||
background: "linear-gradient(90deg, var(--color-surface) 30%, var(--color-mint) 100%)",
|
||||
}}
|
||||
>
|
||||
{/* Bal oldali animáció/kép */}
|
||||
<div className="flex-1 flex items-center justify-center w-full h-full py-10 md:py-0 md:pl-10">
|
||||
<LogoCard
|
||||
imageSrc={logoImg}
|
||||
containerHeight="450px"
|
||||
containerWidth="450px"
|
||||
imageHeight="450px"
|
||||
imageWidth="450px"
|
||||
rotateAmplitude={7}
|
||||
scaleOnHover={1.03}
|
||||
showMobileWarning={false}
|
||||
showTooltip={false}
|
||||
displayOverlayContent={false}
|
||||
/>
|
||||
</div>
|
||||
{/* Jobb oldali panel */}
|
||||
<div className="flex-1 w-full flex flex-col items-center justify-center px-4 md:px-12 py-10">
|
||||
<div className="w-full max-w-md rounded-2xl p-8 flex flex-col gap-8">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-2 text-text">Csatlakozás játékhoz</h2>
|
||||
<div className={`${error ? "border border-error rounded-lg" : ""}`}>
|
||||
<InputBoxDark
|
||||
type="text"
|
||||
placeholder="Játék kódja"
|
||||
value={joinCode}
|
||||
onChange={(e) => setJoinCode(e.target.value)}
|
||||
width="w-full"
|
||||
/>
|
||||
</div>
|
||||
{error && <div className="text-xs mt-1 text-error">{error}</div>}
|
||||
<div className="mt-4">
|
||||
<ButtonDark text="Csatlakozás" type="button" onClick={handleJoin} width="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
{user && (
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold mb-2 text-text">Új játék létrehozása</h2>
|
||||
<ButtonDark text="Játék létrehozása" type="button" onClick={handleCreate} width="w-full" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default PlayMenu
|
||||
@@ -0,0 +1,89 @@
|
||||
import React, { useState } from "react"
|
||||
import Logo from "../../assets/pictures/Logo"
|
||||
import About from "../../pages/About/About"
|
||||
|
||||
const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
|
||||
|
||||
const Navbar = () => {
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
|
||||
return (
|
||||
|
||||
<nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between h-16 items-center">
|
||||
{/* Logo */}
|
||||
<div className="flex-shrink-0 flex items-center gap-2">
|
||||
<div className="flex items-center mt-1 h-9">
|
||||
<Logo size={36} />
|
||||
</div>
|
||||
<span className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
|
||||
SerpentRace
|
||||
</span>
|
||||
</div>
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden md:flex space-x-8">
|
||||
<a href="#" className={navLinkClass}>
|
||||
Home
|
||||
</a>
|
||||
<a href="#" className={navLinkClass}>
|
||||
Leaderboard
|
||||
</a>
|
||||
<a href="/about" className={navLinkClass}>
|
||||
About
|
||||
</a>
|
||||
<a href="#" className={navLinkClass}>
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
{/* Mobile Hamburger */}
|
||||
<div className="md:hidden flex items-center">
|
||||
<button
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
className="text-white focus:outline-none"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg
|
||||
className="h-7 w-7"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{menuOpen ? (
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M6 18L18 6M6 6l12 12"
|
||||
/>
|
||||
) : (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile Menu */}
|
||||
{menuOpen && (
|
||||
<div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
|
||||
<a href="#" className={navLinkClass}>
|
||||
Home
|
||||
</a>
|
||||
<a href="#" className={navLinkClass}>
|
||||
Leaderboard
|
||||
</a>
|
||||
<a href="#" className={navLinkClass}>
|
||||
About
|
||||
</a>
|
||||
<a href="#" className={navLinkClass}>
|
||||
Contact
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default Navbar
|
||||
@@ -0,0 +1,59 @@
|
||||
import { useState } from "react";
|
||||
import Button from "../../components/Buttons/Button";
|
||||
import InputBox from "../../components/Inputs/InputBox";
|
||||
import PopUp from "../../components/PopUp/PopUp";
|
||||
|
||||
const jatekEredmenyek = [
|
||||
{ helyezes: 1, datum: "2025-03-24 14:22" },
|
||||
{ helyezes: 5, datum: "2025-03-24 14:20" },
|
||||
{ helyezes: 3, datum: "2025-03-24 14:18" },
|
||||
{ helyezes: 4, datum: "2025-03-24 14:15" },
|
||||
];
|
||||
|
||||
export default function Test() {
|
||||
const [showPopup, setShowPopup] = useState(false);
|
||||
const [inputValue, setInputValue] = useState("");
|
||||
|
||||
return (
|
||||
<div className="w-full h-screen flex flex-col items-center justify-center space-y-6">
|
||||
<InputBox
|
||||
placeholder="E-mail cím"
|
||||
type="text"
|
||||
width="w-1/2"
|
||||
value={inputValue}
|
||||
onChange={(e) => setInputValue(e.target.value)}
|
||||
/>
|
||||
<Button
|
||||
text="Játék Előzmények"
|
||||
type="button"
|
||||
width="w-1/2"
|
||||
onClick={() => setShowPopup(true)}
|
||||
/>
|
||||
{showPopup && (
|
||||
<PopUp onClose={() => setShowPopup(false)}>
|
||||
<div className="p-6 w-full max-w-md">
|
||||
<h1 className="text-2xl font-bold text-center mb-4">Játék Előzmények</h1>
|
||||
<div className="space-y-3">
|
||||
{jatekEredmenyek.map((eredmeny, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex justify-between items-center rounded-lg p-4 shadow-md ${
|
||||
eredmeny.helyezes <= 3 ? "border-l-4 border-green-500" : "border-l-4 border-blue-500"
|
||||
} bg-gray-50`}
|
||||
>
|
||||
<p className="text-gray-800 font-semibold">
|
||||
Felhasználónév {eredmeny.helyezes}. helyezés
|
||||
</p>
|
||||
<span className="text-sm text-gray-500">{eredmeny.datum}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex justify-center mt-6">
|
||||
<Button text="Bezár" type="button" width="w-24" onClick={() => setShowPopup(false)} />
|
||||
</div>
|
||||
</div>
|
||||
</PopUp>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
// src/components/PopUp/PopUp.jsx
|
||||
// sima komponens, ami megjeleníti a popupot
|
||||
|
||||
import React from "react"
|
||||
|
||||
export default function PopUp({ children, onClose }) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 min-w-[300px] relative">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="absolute top-2 right-2 text-gray-500 hover:text-black text-xl font-bold leading-none"
|
||||
aria-label="Close"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
// src/components/PopUp/RatingSet.jsx
|
||||
|
||||
export default function RatingSet() {
|
||||
// Ezeket lehet később props-ból vagy API-ból is betölteni
|
||||
const stats = [
|
||||
{ label: "Win Rate", value: "68%" },
|
||||
{ label: "Success Rate", value: "85%" },
|
||||
{ label: "My cards rate", value: "72%" },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-6 w-full max-w-md">
|
||||
<h1 className="text-2xl font-bold text-center mb-4">Statisztikák</h1>
|
||||
<div className="space-y-6">
|
||||
{stats.map((stat, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex justify-between items-center rounded-lg p-4 shadow-md bg-gray-50 border-l-4 border-indigo-500"
|
||||
>
|
||||
<p className="text-gray-800 font-semibold">{stat.label}</p>
|
||||
<span className="text-lg font-bold text-indigo-700">{stat.value}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import { useEffect } from "react";
|
||||
import { useLocation } from "react-router-dom";
|
||||
|
||||
const ScrollToTop = () => {
|
||||
const { pathname } = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
}, [pathname]);
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
export default ScrollToTop;
|
||||
@@ -0,0 +1,22 @@
|
||||
import React from "react"
|
||||
import { FaSearch } from "react-icons/fa"
|
||||
|
||||
const SearchBox = ({ value, onChange, width = 220, placeholder = "Keresés...", className = "" }) => {
|
||||
return (
|
||||
<div
|
||||
className={`flex items-center border-2 border-[color:var(--color-success)] rounded-lg bg-[color:var(--color-surface)]/40 px-2 ${className}`}
|
||||
style={{ width }}
|
||||
>
|
||||
<FaSearch className="text-[color:var(--color-success)] mr-2" />
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
className="flex-1 py-1 bg-transparent text-[color:var(--color-text)] border-none outline-none"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SearchBox
|
||||
@@ -0,0 +1,161 @@
|
||||
import React, { useState } from "react"
|
||||
import {
|
||||
FaCommentDots,
|
||||
FaUserFriends,
|
||||
FaBriefcase,
|
||||
FaFacebookF,
|
||||
FaTwitter,
|
||||
FaDribbble,
|
||||
FaSun,
|
||||
FaMoon,
|
||||
FaMedal
|
||||
} from "react-icons/fa"
|
||||
|
||||
const ProfileCard = () => {
|
||||
const [darkMode, setDarkMode] = useState(false)
|
||||
const activityLevel = 87
|
||||
const isPremium = true
|
||||
|
||||
let activityColor = ""
|
||||
let activityEmoji = ""
|
||||
let blocksToColor = 1
|
||||
let celebrationEmoji = ""
|
||||
|
||||
if (activityLevel <= 24) {
|
||||
activityColor = "red-600"
|
||||
activityEmoji = "😞"
|
||||
blocksToColor = 1
|
||||
} else if (activityLevel <= 49) {
|
||||
activityColor = "orange-500"
|
||||
activityEmoji = "😐"
|
||||
blocksToColor = 2
|
||||
} else if (activityLevel <= 74) {
|
||||
activityColor = "yellow-400"
|
||||
activityEmoji = "🙂"
|
||||
blocksToColor = 3
|
||||
} else {
|
||||
activityColor = "emerald-500"
|
||||
activityEmoji = "😄"
|
||||
blocksToColor = 4
|
||||
celebrationEmoji = "🎉"
|
||||
}
|
||||
|
||||
const colorMap = {
|
||||
"red-600": "#dc2626",
|
||||
"orange-500": "#f97316",
|
||||
"yellow-400": "#facc15",
|
||||
"emerald-500": "#10b981"
|
||||
}
|
||||
|
||||
const getBlockStyle = (index) => ({
|
||||
backgroundColor: index < blocksToColor ? colorMap[activityColor] : (darkMode ? "#4b5563" : "#d1d5db")
|
||||
})
|
||||
|
||||
const stats = [
|
||||
{ label: "Játékok", value: 1256, icon: <FaCommentDots /> },
|
||||
{ label: "Barátok", value: 8562, icon: <FaUserFriends /> },
|
||||
{ label: "Győzelmek", value: 189, icon: <FaBriefcase /> },
|
||||
{ label: "Badge-ek", value: 6, icon: <FaMedal /> }
|
||||
]
|
||||
|
||||
const badges = ["🏆", "🔥", "🎯", "🧠", "💎", "🚀"]
|
||||
|
||||
return (
|
||||
<div className={`${darkMode ? "bg-gray-900" : "bg-gray-100"} min-h-screen flex flex-col justify-center items-center px-4 py-12 transition-colors duration-500`}>
|
||||
<div className={`relative max-w-sm w-full rounded-xl shadow-lg overflow-hidden border
|
||||
${darkMode ? "bg-gray-800 border-gray-700" : "bg-white border-gray-200"}`}>
|
||||
|
||||
<button
|
||||
onClick={() => setDarkMode(!darkMode)}
|
||||
className={`absolute top-4 right-4 p-2 rounded-full focus:outline-none
|
||||
${darkMode ? "bg-yellow-400 text-gray-900 hover:bg-yellow-300" : "bg-gray-800 text-yellow-400 hover:bg-gray-700"}`}
|
||||
aria-label="Toggle dark mode"
|
||||
>
|
||||
{darkMode ? <FaSun size={24} /> : <FaMoon size={24} />}
|
||||
</button>
|
||||
|
||||
<div className="p-6 text-center space-y-6">
|
||||
<img
|
||||
src="https://i.pravatar.cc/150?img=12"
|
||||
alt="Avatar"
|
||||
className={`w-24 h-24 mx-auto rounded-full border-4 mb-4 ${darkMode ? "border-blue-700" : "border-blue-200"}`}
|
||||
/>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h2 className={`text-xl font-semibold ${darkMode ? "text-gray-100" : "text-gray-800"}`}>
|
||||
BÉKAAAAA
|
||||
</h2>
|
||||
<div>
|
||||
<div className={`inline-block px-3 py-1 rounded-full text-xs font-semibold
|
||||
${darkMode
|
||||
? (isPremium ? "bg-green-600 text-white" : "bg-gray-600 text-gray-200")
|
||||
: (isPremium ? "bg-green-200 text-green-800" : "bg-blue-200 text-blue-800")}`}>
|
||||
{isPremium ? "Premium Account" : "Free Account"}
|
||||
</div>
|
||||
</div>
|
||||
<p className={`text-sm ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
|
||||
Active | Male | 23.05.1992
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center items-center space-x-2">
|
||||
<p className={`text-sm font-medium flex items-center space-x-1`} style={{ color: colorMap[activityColor] }}>
|
||||
<span>Activity Level: {activityLevel}%</span>
|
||||
<span className="text-xl">{activityEmoji}</span>
|
||||
{celebrationEmoji && <span className="text-xl ml-1">{celebrationEmoji}</span>}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center space-x-1 mb-4">
|
||||
{[0, 1, 2, 3].map(i => (
|
||||
<div
|
||||
key={i}
|
||||
className="w-8 h-1 rounded-full"
|
||||
style={getBlockStyle(i)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Badge szekció */}
|
||||
<div className={`rounded-lg p-4 ${darkMode ? "bg-blue-900" : "bg-blue-200"}`}>
|
||||
<h3 className={`text-sm font-bold mb-2 ${darkMode ? "text-white" : "text-blue-800"}`}>Badge-ek</h3>
|
||||
<div className="flex justify-center flex-wrap gap-2">
|
||||
{badges.map((badge, i) => (
|
||||
<span key={i} className="text-xl">
|
||||
{badge}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Statisztikák */}
|
||||
<div className={`flex flex-wrap justify-around items-center rounded-lg py-6 mt-4 text-white ${darkMode ? "bg-blue-700" : "bg-blue-500"}`}>
|
||||
{stats.map((s, i) => (
|
||||
<div key={i} className="text-center px-2 w-1/2 sm:w-1/4 mb-4">
|
||||
<div className="mb-1 flex justify-center">{s.icon}</div>
|
||||
<p className="text-sm font-semibold">{s.value}</p>
|
||||
<p className="text-xs">{s.label}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className={`text-xs mb-4 ${darkMode ? "text-gray-400" : "text-gray-500"}`}>
|
||||
Gyere és játsz velünk!
|
||||
</p>
|
||||
|
||||
<div className={`flex justify-center gap-6 text-2xl ${darkMode ? "text-blue-400" : "text-blue-600"}`}>
|
||||
<FaFacebookF className="cursor-pointer hover:text-blue-600" />
|
||||
<FaTwitter className="cursor-pointer hover:text-sky-400 hover:text-sky-500" />
|
||||
<FaDribbble className="cursor-pointer hover:text-pink-400" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProfileCard
|
||||
|
||||
|
||||
import UserProfile from "../../components/Userdetails/Userdetails.jsx"
|
||||
|
||||
Reference in New Issue
Block a user