Meilleur design via Shadcn/ui

src/components/AddParticipantModal.tsx

@@ -1,8 +1,9 @@
 'use client';
-
 import { useState } from 'react';
-import { Dialog } from '@headlessui/react';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
 import { participantService } from '@/lib/services';
 
 interface AddParticipantModalProps {
@@ -10,16 +11,10 @@ interface AddParticipantModalProps {
   onClose: () => void;
   onSuccess: () => void;
   campaignId: string;
-  campaignTitle: string;
+  campaignTitle?: string;
 }
 
-export default function AddParticipantModal({ 
-  isOpen, 
-  onClose, 
-  onSuccess, 
-  campaignId, 
-  campaignTitle 
-}: AddParticipantModalProps) {
+export default function AddParticipantModal({ isOpen, onClose, onSuccess, campaignId, campaignTitle }: AddParticipantModalProps) {
   const [formData, setFormData] = useState({
     first_name: '',
     last_name: '',
@@ -40,8 +35,8 @@ export default function AddParticipantModal({
         last_name: formData.last_name,
         email: formData.email
       });
+      
       onSuccess();
-      // Reset form
       setFormData({
         first_name: '',
         last_name: '',
@@ -56,111 +51,78 @@ export default function AddParticipantModal({
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
     setFormData(prev => ({
       ...prev,
-      [name]: value
+      [e.target.name]: e.target.value
     }));
   };
 
   return (
-    <Dialog open={isOpen} onClose={onClose} className="relative z-50">
-      <div className="fixed inset-0 bg-black/30" aria-hidden="true" />
-      
-      <div className="fixed inset-0 flex items-center justify-center p-4">
-        <Dialog.Panel className="mx-auto max-w-md w-full bg-white rounded-lg shadow-xl">
-          <div className="flex items-center justify-between p-6 border-b border-gray-200">
-            <Dialog.Title className="text-lg font-medium text-gray-900">
-              Ajouter un participant
-            </Dialog.Title>
-            <button
-              onClick={onClose}
-              className="text-gray-400 hover:text-gray-600"
-            >
-              <XMarkIcon className="h-6 w-6" />
-            </button>
-          </div>
-
-          <div className="px-6 py-4 bg-green-50 border-b border-gray-200">
-            <p className="text-sm text-green-800">
-              <span className="font-medium">Campagne:</span> {campaignTitle}
-            </p>
-          </div>
-
-          <form onSubmit={handleSubmit} className="p-6 space-y-4">
-            {error && (
-              <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-md">
-                {error}
-              </div>
-            )}
-
-            <div>
-              <label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">
-                Prénom *
-              </label>
-              <input
-                type="text"
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Ajouter un participant</DialogTitle>
+          <DialogDescription>
+            {campaignTitle && `Ajoutez un nouveau participant à la campagne "${campaignTitle}".`}
+            {!campaignTitle && 'Ajoutez un nouveau participant à cette campagne.'}
+          </DialogDescription>
+        </DialogHeader>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {error && (
+            <div className="p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+              <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
+            </div>
+          )}
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            <div className="space-y-2">
+              <Label htmlFor="first_name">Prénom *</Label>
+              <Input
                 id="first_name"
                 name="first_name"
                 value={formData.first_name}
                 onChange={handleChange}
+                placeholder="Prénom"
                 required
-                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-                placeholder="Prénom du participant"
               />
             </div>
-
-            <div>
-              <label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">
-                Nom *
-              </label>
-              <input
-                type="text"
+            <div className="space-y-2">
+              <Label htmlFor="last_name">Nom *</Label>
+              <Input
                 id="last_name"
                 name="last_name"
                 value={formData.last_name}
                 onChange={handleChange}
+                placeholder="Nom"
                 required
-                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-                placeholder="Nom du participant"
               />
             </div>
-
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
-                Email *
-              </label>
-              <input
-                type="email"
-                id="email"
-                name="email"
-                value={formData.email}
-                onChange={handleChange}
-                required
-                className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
-                placeholder="email@exemple.com"
-              />
-            </div>
-
-            <div className="flex items-center justify-end space-x-3 pt-4">
-              <button
-                type="button"
-                onClick={onClose}
-                className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"
-              >
-                Annuler
-              </button>
-              <button
-                type="submit"
-                disabled={loading}
-                className="px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {loading ? 'Ajout...' : 'Ajouter le participant'}
-              </button>
-            </div>
-          </form>
-        </Dialog.Panel>
-      </div>
+          </div>
+          
+          <div className="space-y-2">
+            <Label htmlFor="email">Email *</Label>
+            <Input
+              id="email"
+              name="email"
+              type="email"
+              value={formData.email}
+              onChange={handleChange}
+              placeholder="email@example.com"
+              required
+            />
+          </div>
+          
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Annuler
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading ? 'Ajout...' : 'Ajouter le participant'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
     </Dialog>
   );
 }