[#90] Cégek Kezelésehttps://project.mdnd-it.cc/work_packages/90
This commit is contained in:
@@ -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