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

Enhance UI components and animations: Introduce a shimmer animation effect in globals.css, refactor FeedbackPageClient, LoginPage, RegisterPage, and AdminPanel components to utilize new UI components for improved consistency and maintainability. Update event and feedback handling in EventsPageSection and FeedbackModal, ensuring a cohesive user experience across the application.

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-12 16:44:57 +01:00
parent db01c25de7
commit 99a475736b
32 changed files with 2242 additions and 1389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
components/UserManagement.tsx
View File

@@ -1,7 +1,7 @@
"use client";
import { useState, useEffect, useTransition } from "react";
import Avatar from "./Avatar";
import { Avatar, Input, Button, Card } from "@/components/ui";
import { updateUser, deleteUser } from "@/actions/admin/users";
interface User {
@@ -184,10 +184,7 @@ export default function UserManagement() {
: user.username;
return (
<div
key={user.id}
className="bg-black/60 border border-pixel-gold/20 rounded p-3 sm:p-4"
>
<Card key={user.id} variant="default" className="p-3 sm:p-4">
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-2">
<div className="flex gap-2 sm:gap-3 items-center flex-1 min-w-0">
{/* Avatar */}
@@ -248,23 +245,19 @@ export default function UserManagement() {
{isEditing ? (
<div className="space-y-4">
{/* Username Section */}
<div>
<label className="block text-xs sm:text-sm text-gray-300 mb-2">
Nom d&apos;utilisateur
</label>
<input
type="text"
value={editingUser.username || ""}
onChange={(e) =>
setEditingUser({
...editingUser,
username: e.target.value,
})
}
className="w-full px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
placeholder="Nom d'utilisateur"
/>
</div>
<Input
type="text"
label="Nom d'utilisateur"
value={editingUser.username || ""}
onChange={(e) =>
setEditingUser({
...editingUser,
username: e.target.value,
})
}
placeholder="Nom d'utilisateur"
className="text-xs sm:text-sm px-2 sm:px-3 py-1"
/>
{/* Avatar Section */}
<div className="flex flex-col items-center gap-3">
@@ -372,13 +365,17 @@ export default function UserManagement() {
className="hidden"
id={`avatar-upload-${user.id}`}
/>
<label
htmlFor={`avatar-upload-${user.id}`}
className="px-3 sm:px-4 py-1.5 border border-pixel-gold/50 bg-black/40 text-white uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition cursor-pointer inline-block"
>
{uploadingAvatar === user.id
? "Upload en cours..."
: "Upload un avatar custom"}
<label htmlFor={`avatar-upload-${user.id}`}>
<Button
variant="primary"
size="sm"
as="span"
className="cursor-pointer"
>
{uploadingAvatar === user.id
? "Upload en cours..."
: "Upload un avatar custom"}
</Button>
</label>
</div>
</div>
@@ -690,19 +687,21 @@ export default function UserManagement() {
</div>
<div className="flex flex-col sm:flex-row gap-2 pt-2">
<button
<Button
onClick={handleSave}
variant="success"
size="md"
disabled={saving}
className="px-4 py-2 border border-green-500/50 bg-green-900/20 text-green-400 uppercase text-xs tracking-widest rounded hover:bg-green-900/30 transition disabled:opacity-50"
>
{saving ? "Enregistrement..." : "Enregistrer"}
</button>
<button
</Button>
<Button
onClick={handleCancel}
className="px-4 py-2 border border-gray-600/50 bg-gray-900/20 text-gray-400 uppercase text-xs tracking-widest rounded hover:bg-gray-900/30 transition"
variant="secondary"
size="md"
>
Annuler
</button>
</Button>
</div>
</div>
) : (
@@ -747,7 +746,7 @@ export default function UserManagement() {
</div>
</div>
)}
</div>
</Card>
);
})
)}