migration wip

components/ContactForm.tsx

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
 import { usePathname } from 'next/navigation';
 import { getDictionary } from '@/lib/i18n';
 import { Card, CardBody, CardHeader, Button } from '@/components/ui';
+import { FormField, FormInput, FormTextarea, FormError, FormSuccess } from '@/components/forms';
 
 interface FormData {
   name: string;
@@ -140,116 +141,68 @@ export function ContactForm() {
         subtitle={t('contact.subtitle')}
       />
       <CardBody>
-        {status === 'success' && (
-          <div className="p-4 bg-green-50 border border-green-200 rounded-lg text-green-800 mb-4">
-            {t('contact.success')}
-          </div>
-        )}
-        
-        {status === 'error' && (
-          <div className="p-4 bg-red-50 border border-red-200 rounded-lg text-red-800 mb-4">
-            {t('contact.error')}
-          </div>
-        )}
-        
+        <FormSuccess message={status === 'success' ? t('contact.success') : undefined} />
+        <FormError errors={status === 'error' ? t('contact.error') : undefined} />
+
         <form onSubmit={handleSubmit} className="space-y-6">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div>
-              <label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
-                {t('contact.name')} *
-              </label>
-              <input
-                type="text"
-                id="name"
-                name="name"
-                value={formData.name}
-                onChange={handleChange}
-                className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all ${
-                  errors.name ? 'border-red-500 bg-red-50' : 'border-gray-300'
-                }`}
-                disabled={status === 'loading'}
-                aria-invalid={!!errors.name}
-                aria-describedby={errors.name ? 'name-error' : undefined}
-              />
-              {errors.name && (
-                <p id="name-error" className="mt-1 text-sm text-red-600">{errors.name}</p>
-              )}
-            </div>
-            
-            <div>
-              <label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
-                {t('contact.email')} *
-              </label>
-              <input
-                type="email"
-                id="email"
-                name="email"
-                value={formData.email}
-                onChange={handleChange}
-                className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all ${
-                  errors.email ? 'border-red-500 bg-red-50' : 'border-gray-300'
-                }`}
-                disabled={status === 'loading'}
-                aria-invalid={!!errors.email}
-                aria-describedby={errors.email ? 'email-error' : undefined}
-              />
-              {errors.email && (
-                <p id="email-error" className="mt-1 text-sm text-red-600">{errors.email}</p>
-              )}
-            </div>
-          </div>
-          
-          <div>
-            <label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
-              {t('contact.phone')}
-            </label>
-            <input
-              type="tel"
-              id="phone"
-              name="phone"
-              value={formData.phone}
-              onChange={handleChange}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
-              disabled={status === 'loading'}
-            />
-          </div>
-          
-          <div>
-            <label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
-              {t('contact.subject')}
-            </label>
-            <input
+            <FormField
+              name="name"
+              label={t('contact.name')}
+              required
+              error={errors.name}
               type="text"
-              id="subject"
-              name="subject"
-              value={formData.subject}
-              onChange={handleChange}
-              className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all"
+              value={formData.name}
+              onChange={(value) => setFormData(prev => ({ ...prev, name: value }))}
               disabled={status === 'loading'}
+              placeholder={t('contact.name')}
+            />
+
+            <FormField
+              name="email"
+              label={t('contact.email')}
+              required
+              error={errors.email}
+              type="email"
+              value={formData.email}
+              onChange={(value) => setFormData(prev => ({ ...prev, email: value }))}
+              disabled={status === 'loading'}
+              placeholder={t('contact.email')}
             />
           </div>
-          
-          <div>
-            <label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
-              {t('contact.message')} *
-            </label>
-            <textarea
-              id="message"
-              name="message"
-              rows={6}
-              value={formData.message}
-              onChange={handleChange}
-              className={`w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all ${
-                errors.message ? 'border-red-500 bg-red-50' : 'border-gray-300'
-              }`}
-              disabled={status === 'loading'}
-              aria-invalid={!!errors.message}
-              aria-describedby={errors.message ? 'message-error' : undefined}
-            />
-            {errors.message && (
-              <p id="message-error" className="mt-1 text-sm text-red-600">{errors.message}</p>
-            )}
-          </div>
+
+          <FormField
+            name="phone"
+            label={t('contact.phone')}
+            type="tel"
+            value={formData.phone}
+            onChange={(value) => setFormData(prev => ({ ...prev, phone: value }))}
+            disabled={status === 'loading'}
+            placeholder={t('contact.phone')}
+          />
+
+          <FormField
+            name="subject"
+            label={t('contact.subject')}
+            type="text"
+            value={formData.subject}
+            onChange={(value) => setFormData(prev => ({ ...prev, subject: value }))}
+            disabled={status === 'loading'}
+            placeholder={t('contact.subject')}
+          />
+
+          <FormField
+            name="message"
+            label={t('contact.message')}
+            required
+            error={errors.message}
+            type="textarea"
+            value={formData.message}
+            onChange={(value) => setFormData(prev => ({ ...prev, message: value }))}
+            disabled={status === 'loading'}
+            placeholder={t('contact.message')}
+            rows={6}
+          />
           
           <div className="flex items-center justify-between gap-4">
             <p className="text-sm text-gray-500">