julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: user admin ui : condensed

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-09 12:40:45 +01:00
parent d1e94f1402
commit f732eb7385
1 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
components/UserManagement.tsx
View File

@@ -146,12 +146,12 @@ export default function UserManagement() {
return ( return (
<div <div
key={user.id} key={user.id}
className="bg-black/60 border border-pixel-gold/20 rounded p-4" className="bg-black/60 border border-pixel-gold/20 rounded p-3"
> >
<div className="flex justify-between items-start mb-4"> <div className="flex justify-between items-center mb-2">
<div className="flex gap-4 items-start"> <div className="flex gap-3 items-center flex-1 min-w-0">
{/* Avatar */} {/* Avatar */}
<div className="w-16 h-16 rounded-full border-2 border-pixel-gold/50 overflow-hidden bg-black/60 flex-shrink-0"> <div className="w-10 h-10 rounded-full border-2 border-pixel-gold/50 overflow-hidden bg-black/60 flex-shrink-0">
{user.avatar ? ( {user.avatar ? (
<img <img
src={user.avatar} src={user.avatar}
@@ -163,28 +163,28 @@ export default function UserManagement() {
}} }}
/> />
) : null} ) : null}
<div className={`w-full h-full flex items-center justify-center text-pixel-gold text-xl font-bold ${user.avatar ? "hidden" : ""}`}> <div className={`w-full h-full flex items-center justify-center text-pixel-gold text-sm font-bold ${user.avatar ? "hidden" : ""}`}>
{user.username.charAt(0).toUpperCase()} {user.username.charAt(0).toUpperCase()}
</div> </div>
</div> </div>
<div> <div className="flex-1 min-w-0">
<h3 className="text-pixel-gold font-bold text-lg"> <div className="flex items-center gap-2 flex-wrap">
{user.username} <h3 className="text-pixel-gold font-bold text-base">
</h3> {user.username}
<p className="text-gray-400 text-sm">{user.email}</p> </h3>
<div className="flex gap-4 mt-2 text-xs text-gray-500"> <span className="text-xs text-gray-500">Niveau {user.level}</span>
<span>Niveau {user.level}</span> <span className="text-xs text-gray-500">Score: {formatNumber(user.score)}</span>
<span>Score: {formatNumber(user.score)}</span> <span className={`text-xs ${user.role === "ADMIN" ? "text-pixel-gold" : "text-gray-500"}`}>
<span className={user.role === "ADMIN" ? "text-pixel-gold" : ""}>
{user.role} {user.role}
</span> </span>
</div> </div>
<p className="text-gray-400 text-xs truncate">{user.email}</p>
</div> </div>
</div> </div>
{!isEditing && ( {!isEditing && (
<button <button
onClick={() => handleEdit(user)} onClick={() => handleEdit(user)}
className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition" className="px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition flex-shrink-0 ml-2"
> >
Modifier Modifier
</button> </button>
@@ -510,15 +510,15 @@ export default function UserManagement() {
</div> </div>
</div> </div>
) : ( ) : (
<div className="space-y-2"> <div className="flex gap-4 text-xs">
<div> <div className="flex-1">
<div className="flex justify-between items-center mb-1"> <div className="flex justify-between items-center mb-0.5">
<span className="text-xs text-gray-400">HP</span> <span className="text-gray-400">HP</span>
<span className="text-xs text-gray-400"> <span className="text-gray-400">
{user.hp} / {user.maxHp} {user.hp}/{user.maxHp}
</span> </span>
</div> </div>
<div className="h-2 bg-black/60 rounded-full overflow-hidden"> <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
<div <div
className="h-full bg-gradient-to-r from-red-600 to-green-500" className="h-full bg-gradient-to-r from-red-600 to-green-500"
style={{ style={{
@@ -527,14 +527,14 @@ export default function UserManagement() {
/> />
</div> </div>
</div> </div>
<div> <div className="flex-1">
<div className="flex justify-between items-center mb-1"> <div className="flex justify-between items-center mb-0.5">
<span className="text-xs text-gray-400">XP</span> <span className="text-gray-400">XP</span>
<span className="text-xs text-gray-400"> <span className="text-gray-400">
{formatNumber(user.xp)} / {formatNumber(user.maxXp)} {formatNumber(user.xp)}/{formatNumber(user.maxXp)}
</span> </span>
</div> </div>
<div className="h-2 bg-black/60 rounded-full overflow-hidden"> <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
<div <div
className="h-full bg-gradient-to-r from-blue-600 to-purple-500" className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
style={{ style={{