card form added

src/components/LoyaltyCardForm.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 interface LoyaltyCardFormProps {
   isOpen: boolean;
@@ -7,6 +7,7 @@ interface LoyaltyCardFormProps {
 }
 
 const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
+  const modalRef = useRef<HTMLDivElement>(null);
   const [formData, setFormData] = useState({
     firstName: '',
     lastName: '',
@@ -17,11 +18,20 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
     email: '',
   });
 
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isOpen]);
+
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    // Handle form submission here
     console.log('Form submitted:', formData);
-    // Reset form and close overlay
     setFormData({
       firstName: '',
       lastName: '',
@@ -37,15 +47,29 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
   if (!isOpen) return null;
 
   return (
-    <div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4">
-      <div className="bg-white rounded-lg max-w-md w-full max-h-[90vh] overflow-y-auto">
-        <div className="p-6">
+    <div className="fixed inset-0 z-50 overflow-y-auto bg-black/50 backdrop-blur-sm">
+      <div className="min-h-screen px-4 text-center">
+        {/* This element centers the modal */}
+        <span
+          className="inline-block h-screen align-middle"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+
+        {/* Modal */}
+        <div 
+          ref={modalRef}
+          className="inline-block w-full max-w-md p-6 my-8 text-left align-middle bg-white rounded-lg shadow-xl transform transition-all"
+          onClick={(e) => e.stopPropagation()}
+        >
           <div className="flex justify-between items-center mb-6">
-            <h2 className="font-serif text-2xl text-bakery-800">Demande de Carte de Fidélité</h2>
+            <h2 className="font-serif text-2xl text-bakery-800">
+              Demande de Carte de Fidélité
+            </h2>
             <button
               onClick={onClose}
               className="text-bakery-600 hover:text-bakery-800"
-              aria-label="Fermer"
             >
               <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -54,86 +78,95 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
           </div>
 
           <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label htmlFor="firstName" className="block text-sm font-medium text-bakery-700">Prénom</label>
-              <input
-                type="text"
-                id="firstName"
-                required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
-                value={formData.firstName}
-                onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
-              />
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-bakery-700 mb-1">
+                  Prénom
+                </label>
+                <input
+                  type="text"
+                  required
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
+                  value={formData.firstName}
+                  onChange={(e) => setFormData({ ...formData, firstName: e.target.value })}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-bakery-700 mb-1">
+                  Nom
+                </label>
+                <input
+                  type="text"
+                  required
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
+                  value={formData.lastName}
+                  onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
+                />
+              </div>
             </div>
 
             <div>
-              <label htmlFor="lastName" className="block text-sm font-medium text-bakery-700">Nom</label>
-              <input
-                type="text"
-                id="lastName"
-                required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
-                value={formData.lastName}
-                onChange={(e) => setFormData({ ...formData, lastName: e.target.value })}
-              />
-            </div>
-
-            <div>
-              <label htmlFor="age" className="block text-sm font-medium text-bakery-700">Âge</label>
+              <label className="block text-sm font-medium text-bakery-700 mb-1">
+                Âge
+              </label>
               <input
                 type="number"
-                id="age"
                 required
                 min="0"
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
                 value={formData.age}
                 onChange={(e) => setFormData({ ...formData, age: e.target.value })}
               />
             </div>
 
             <div>
-              <label htmlFor="address" className="block text-sm font-medium text-bakery-700">Adresse</label>
+              <label className="block text-sm font-medium text-bakery-700 mb-1">
+                Adresse
+              </label>
               <input
                 type="text"
-                id="address"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
                 value={formData.address}
                 onChange={(e) => setFormData({ ...formData, address: e.target.value })}
               />
             </div>
 
-            <div>
-              <label htmlFor="postalCode" className="block text-sm font-medium text-bakery-700">Code Postal</label>
-              <input
-                type="text"
-                id="postalCode"
-                required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
-                value={formData.postalCode}
-                onChange={(e) => setFormData({ ...formData, postalCode: e.target.value })}
-              />
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-bakery-700 mb-1">
+                  Code Postal
+                </label>
+                <input
+                  type="text"
+                  required
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
+                  value={formData.postalCode}
+                  onChange={(e) => setFormData({ ...formData, postalCode: e.target.value })}
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-bakery-700 mb-1">
+                  Ville
+                </label>
+                <input
+                  type="text"
+                  required
+                  className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
+                  value={formData.city}
+                  onChange={(e) => setFormData({ ...formData, city: e.target.value })}
+                />
+              </div>
             </div>
 
             <div>
-              <label htmlFor="city" className="block text-sm font-medium text-bakery-700">Ville</label>
-              <input
-                type="text"
-                id="city"
-                required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
-                value={formData.city}
-                onChange={(e) => setFormData({ ...formData, city: e.target.value })}
-              />
-            </div>
-
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-bakery-700">Email</label>
+              <label className="block text-sm font-medium text-bakery-700 mb-1">
+                Email
+              </label>
               <input
                 type="email"
-                id="email"
                 required
-                className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-bakery-500 focus:ring-bakery-500"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-bakery-500"
                 value={formData.email}
                 onChange={(e) => setFormData({ ...formData, email: e.target.value })}
               />
@@ -141,7 +174,7 @@ const LoyaltyCardForm = ({ isOpen, onClose }: LoyaltyCardFormProps) => {
 
             <button
               type="submit"
-              className="w-full bg-bakery-600 text-white py-2 px-4 rounded-md hover:bg-bakery-700 transition duration-200"
+              className="w-full bg-bakery-600 text-white py-3 px-4 rounded-md hover:bg-bakery-700 transition duration-200 mt-6"
             >
               Demander ma carte
             </button>