refactor: replace contact form with ContactFormCard component
- Removed the old `ContactForm` component and integrated the new `ContactFormCard` for improved structure and validation. - Updated `ContactPage` to utilize the new `ContactFormCard`, enhancing user experience with better form handling and error management. - Implemented form validation using Zod and improved user feedback with toast notifications.
This commit is contained in:
javayhu
parent
aef4ce6296
commit
c53cbb1ce2
@ -1,38 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
|
||||
export function ContactForm({ labels }: {
|
||||
labels: {
|
||||
name: string;
|
||||
email: string;
|
||||
message: string;
|
||||
submit: string;
|
||||
}
|
||||
}) {
|
||||
return (
|
||||
<form action="" className="mt-8 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">{labels.name}</Label>
|
||||
<Input type="text" id="name" required />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">{labels.email}</Label>
|
||||
<Input type="email" id="email" required />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="msg">{labels.message}</Label>
|
||||
<Textarea id="msg" rows={3} />
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full">
|
||||
{labels.submit}
|
||||
</Button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
@ -1,20 +1,19 @@
|
||||
import { Card } from '@/components/ui/card';
|
||||
import { ContactFormCard } from '@/components/contact/contact-form-card';
|
||||
import { constructMetadata } from '@/lib/metadata';
|
||||
import { getBaseUrlWithLocale } from '@/lib/urls/get-base-url';
|
||||
import { Metadata } from 'next';
|
||||
import { Locale } from 'next-intl';
|
||||
import { getTranslations } from 'next-intl/server';
|
||||
import { ContactForm } from './contact-form';
|
||||
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ locale: Locale }>;
|
||||
}): Promise<Metadata | undefined> {
|
||||
const {locale} = await params;
|
||||
const t = await getTranslations({locale, namespace: 'Metadata'});
|
||||
const pageTranslations = await getTranslations({locale, namespace: 'ContactPage'});
|
||||
|
||||
const { locale } = await params;
|
||||
const t = await getTranslations({ locale, namespace: 'Metadata' });
|
||||
const pageTranslations = await getTranslations({ locale, namespace: 'ContactPage' });
|
||||
|
||||
return constructMetadata({
|
||||
title: pageTranslations('title') + ' | ' + t('title'),
|
||||
description: pageTranslations('description'),
|
||||
@ -29,7 +28,7 @@ export default async function ContactPage() {
|
||||
const t = await getTranslations('ContactPage');
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto space-y-8 p-8">
|
||||
<div className="max-w-4xl mx-auto space-y-8 py-8">
|
||||
{/* Header */}
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-center text-3xl font-bold tracking-tight">
|
||||
@ -41,20 +40,7 @@ export default async function ContactPage() {
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<Card className="mx-auto max-w-lg p-8 shadow-md">
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('formDescription')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ContactForm labels={{
|
||||
name: t('name'),
|
||||
email: t('email'),
|
||||
message: t('message'),
|
||||
submit: t('submit')
|
||||
}} />
|
||||
</Card>
|
||||
<ContactFormCard />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
159
src/components/contact/contact-form-card.tsx
Normal file
159
src/components/contact/contact-form-card.tsx
Normal file
@ -0,0 +1,159 @@
|
||||
"use client";
|
||||
|
||||
import { FormError } from '@/components/shared/form-error';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from '@/components/ui/card';
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage
|
||||
} from '@/components/ui/form';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { toast } from 'sonner';
|
||||
import { z } from 'zod';
|
||||
|
||||
export function ContactFormCard() {
|
||||
const t = useTranslations('ContactPage');
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState<string | undefined>('');
|
||||
|
||||
// Create a schema for contact form validation
|
||||
const formSchema = z.object({
|
||||
name: z
|
||||
.string()
|
||||
.min(3, { message: 'Name must be at least 3 characters' })
|
||||
.max(30, { message: 'Name must not exceed 30 characters' }),
|
||||
email: z
|
||||
.string()
|
||||
.email({ message: 'Please enter a valid email address' }),
|
||||
message: z
|
||||
.string()
|
||||
.min(10, { message: 'Message must be at least 10 characters' })
|
||||
.max(500, { message: 'Message must not exceed 500 characters' }),
|
||||
});
|
||||
|
||||
// Initialize the form
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
name: '',
|
||||
email: '',
|
||||
message: '',
|
||||
},
|
||||
});
|
||||
|
||||
// Handle form submission
|
||||
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
||||
setIsSubmitting(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
// Here you would typically send the form data to your API
|
||||
console.log('Form submitted:', values);
|
||||
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
|
||||
// Show success message
|
||||
toast.success('Your message has been sent successfully!');
|
||||
|
||||
// Reset form
|
||||
form.reset();
|
||||
} catch (err) {
|
||||
console.error('Form submission error:', err);
|
||||
setError('Failed to send your message. Please try again.');
|
||||
toast.error('Failed to send your message. Please try again.');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="mx-auto max-w-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg font-bold">{t('title')}</CardTitle>
|
||||
<CardDescription>{t('formDescription')}</CardDescription>
|
||||
</CardHeader>
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)}>
|
||||
<CardContent className="space-y-6">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('name')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder={t('name')}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('email')}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder={t('email')}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="message"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{t('message')}</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder={t('message')}
|
||||
rows={3}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormError message={error} />
|
||||
</CardContent>
|
||||
<CardFooter className="px-6 py-4 flex justify-between items-center bg-muted">
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Submitting...' : t('submit')}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user