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

Refactor modal implementation across admin components: Replace Card components with a reusable Modal component in ChallengeManagement, EventManagement, and UserManagement, enhancing UI consistency and maintainability. Update Modal to use React portals for improved rendering.

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-16 16:50:06 +01:00
parent 16e4b63ffd
commit 79c21955e0
4 changed files with 720 additions and 662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
components/admin/ChallengeManagement.tsx
View File

@@ -9,7 +9,7 @@ import {
adminCancelChallenge,
reactivateChallenge,
} from "@/actions/admin/challenges";
import { Button, Card, Input, Textarea, Alert } from "@/components/ui";
import { Button, Card, Input, Textarea, Alert, Modal, CloseButton } from "@/components/ui";
import { Avatar } from "@/components/ui";
interface Challenge {
@@ -417,23 +417,29 @@ export default function ChallengeManagement() {
{/* Modal de validation */}
{selectedChallenge && (
<div
className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
onClick={() => {
<Modal
isOpen={!!selectedChallenge}
onClose={() => {
setSelectedChallenge(null);
setWinnerId("");
setAdminComment("");
}}
size="lg"
>
<Card
variant="dark"
className="max-w-2xl w-full max-h-[90vh] overflow-y-auto"
onClick={(e) => e.stopPropagation()}
>
<div className="p-6">
<h2 className="text-2xl font-bold text-pixel-gold mb-4">
<div className="p-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-2xl font-bold text-pixel-gold">
Désigner le gagnant
</h2>
<CloseButton
onClick={() => {
setSelectedChallenge(null);
setWinnerId("");
setAdminComment("");
}}
size="lg"
/>
</div>
<div className="mb-6">
<h3 className="text-lg font-bold text-gray-300 mb-2">
@@ -544,31 +550,37 @@ export default function ChallengeManagement() {
Annuler
</Button>
</div>
</div>
</Card>
</div>
</div>
</Modal>
)}
{/* Modal d'édition */}
{editingChallenge && (
<div
className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
onClick={() => {
<Modal
isOpen={!!editingChallenge}
onClose={() => {
setEditingChallenge(null);
setEditTitle("");
setEditDescription("");
setEditPointsReward(0);
}}
size="lg"
>
<Card
variant="dark"
className="max-w-2xl w-full max-h-[90vh] overflow-y-auto"
onClick={(e) => e.stopPropagation()}
>
<div className="p-6">
<h2 className="text-2xl font-bold text-pixel-gold mb-4">
<div className="p-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-2xl font-bold text-pixel-gold">
Modifier le défi
</h2>
<CloseButton
onClick={() => {
setEditingChallenge(null);
setEditTitle("");
setEditDescription("");
setEditPointsReward(0);
}}
size="lg"
/>
</div>
<div className="space-y-4">
<Input
@@ -631,9 +643,8 @@ export default function ChallengeManagement() {
</Button>
</div>
</div>
</div>
</Card>
</div>
</div>
</Modal>
)}
</div>
);