Meilleur design via Shadcn/ui

src/components/AddPropositionModal.tsx

@@ -1,8 +1,10 @@
 '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 { Textarea } from '@/components/ui/textarea';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Label } from '@/components/ui/label';
 import { propositionService } from '@/lib/services';
 
 interface AddPropositionModalProps {
@@ -10,16 +12,9 @@ interface AddPropositionModalProps {
   onClose: () => void;
   onSuccess: () => void;
   campaignId: string;
-  campaignTitle: string;
 }
 
-export default function AddPropositionModal({ 
-  isOpen, 
-  onClose, 
-  onSuccess, 
-  campaignId, 
-  campaignTitle 
-}: AddPropositionModalProps) {
+export default function AddPropositionModal({ isOpen, onClose, onSuccess, campaignId }: AddPropositionModalProps) {
   const [formData, setFormData] = useState({
     title: '',
     description: '',
@@ -44,17 +39,17 @@ export default function AddPropositionModal({
         author_last_name: formData.author_last_name,
         author_email: formData.author_email
       });
+      
       onSuccess();
-      // Reset form
       setFormData({
         title: '',
         description: '',
-        author_first_name: '',
-        author_last_name: '',
-        author_email: ''
+        author_first_name: 'admin',
+        author_last_name: 'admin',
+        author_email: 'admin@example.com'
       });
     } catch (err) {
-      setError('Erreur lors de l\'ajout de la proposition');
+      setError('Erreur lors de la création de la proposition');
       console.error(err);
     } finally {
       setLoading(false);
@@ -62,149 +57,106 @@ export default function AddPropositionModal({
   };
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    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 une proposition
-            </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-blue-50 border-b border-gray-200">
-            <p className="text-sm text-blue-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="title" className="block text-sm font-medium text-gray-700 mb-1">
-                Titre de la proposition *
-              </label>
-              <input
-                type="text"
-                id="title"
-                name="title"
-                value={formData.title}
-                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="Titre de la proposition"
-              />
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Ajouter une proposition</DialogTitle>
+          <DialogDescription>
+            Créez une nouvelle proposition pour cette campagne de budget participatif.
+          </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>
-              <label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
-                Description *
-              </label>
-              <textarea
-                id="description"
-                name="description"
-                value={formData.description}
-                onChange={handleChange}
-                required
-                rows={4}
-                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="Décrivez votre proposition en détail..."
-              />
-            </div>
-
-            <div className="border-t border-gray-200 pt-4">
-              <h3 className="text-sm font-medium text-gray-900 mb-3">Informations de l'auteur</h3>
-              
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
-                <div>
-                  <label htmlFor="author_first_name" className="block text-sm font-medium text-gray-700 mb-1">
-                    Prénom *
-                  </label>
-                  <input
-                    type="text"
-                    id="author_first_name"
-                    name="author_first_name"
-                    value={formData.author_first_name}
-                    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="Prénom"
-                  />
-                </div>
-
-                <div>
-                  <label htmlFor="author_last_name" className="block text-sm font-medium text-gray-700 mb-1">
-                    Nom *
-                  </label>
-                  <input
-                    type="text"
-                    id="author_last_name"
-                    name="author_last_name"
-                    value={formData.author_last_name}
-                    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="Nom"
-                  />
-                </div>
-              </div>
-
-              <div className="mt-3">
-                <label htmlFor="author_email" className="block text-sm font-medium text-gray-700 mb-1">
-                  Email *
-                </label>
-                <input
-                  type="email"
-                  id="author_email"
-                  name="author_email"
-                  value={formData.author_email}
+          )}
+          
+          <div className="space-y-2">
+            <Label htmlFor="title">Titre de la proposition *</Label>
+            <Input
+              id="title"
+              name="title"
+              value={formData.title}
+              onChange={handleChange}
+              placeholder="Ex: Installation de bancs dans le parc"
+              required
+            />
+          </div>
+          
+          <div className="space-y-2">
+            <Label htmlFor="description">Description *</Label>
+            <Textarea
+              id="description"
+              name="description"
+              value={formData.description}
+              onChange={handleChange}
+              placeholder="Décrivez votre proposition en détail..."
+              rows={4}
+              required
+            />
+          </div>
+          
+          <div className="border-t border-slate-200 dark:border-slate-700 pt-4">
+            <h3 className="text-sm font-medium text-slate-900 dark:text-slate-100 mb-3">
+              Informations de l'auteur
+            </h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+              <div className="space-y-2">
+                <Label htmlFor="author_first_name">Prénom *</Label>
+                <Input
+                  id="author_first_name"
+                  name="author_first_name"
+                  value={formData.author_first_name}
                   onChange={handleChange}
+                  placeholder="Prénom"
+                  required
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="author_last_name">Nom *</Label>
+                <Input
+                  id="author_last_name"
+                  name="author_last_name"
+                  value={formData.author_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="email@exemple.com"
                 />
               </div>
             </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 la proposition'}
-              </button>
+            <div className="space-y-2 mt-3">
+              <Label htmlFor="author_email">Email *</Label>
+              <Input
+                id="author_email"
+                name="author_email"
+                type="email"
+                value={formData.author_email}
+                onChange={handleChange}
+                placeholder="email@example.com"
+                required
+              />
             </div>
-          </form>
-        </Dialog.Panel>
-      </div>
+          </div>
+          
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={onClose}>
+              Annuler
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading ? 'Création...' : 'Créer la proposition'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
     </Dialog>
   );
 }