mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

forms

Browse Source
This commit is contained in:
Marc Mintel
2026-01-26 22:55:13 +01:00
parent baec7cc94a
commit dea3b57627
2 changed files with 50 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
components/ContactForm.tsx
View File

@@ -58,6 +58,29 @@ export default function ContactForm() {
); );
} }
if (status === 'error') {
return (
<Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-destructive/20 shadow-2xl text-center bg-destructive/5 animate-slide-up">
<div className="w-20 h-20 bg-destructive rounded-full flex items-center justify-center mx-auto mb-6 shadow-lg shadow-destructive/20">
<svg className="w-10 h-10 text-destructive-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2">
<circle cx="12" cy="12" r="10" />
<line x1="15" y1="9" x2="9" y2="15" strokeLinecap="round" strokeLinejoin="round" />
<line x1="9" y1="9" x2="15" y2="15" strokeLinecap="round" strokeLinejoin="round" />
</svg>
</div>
<Heading level={3} className="mb-4 text-destructive font-black">
{t('form.errorTitle') || 'Submission Failed!'}
</Heading>
<p className="text-destructive/80 text-lg mb-8 leading-relaxed font-medium">
{t('form.error') || 'Something went wrong. Please check your input and try again.'}
</p>
<Button onClick={() => setStatus('idle')} variant="saturated" size="lg" className="w-full bg-destructive hover:bg-destructive/90 text-destructive-foreground border-destructive shadow-lg shadow-destructive/20">
{t('form.tryAgain') || 'Try Again'}
</Button>
</Card>
);
}
return ( return (
<Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl animate-slide-up"> <Card className="p-6 md:p-12 rounded-2xl md:rounded-[40px] border-none shadow-2xl animate-slide-up">
<Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10"> <Heading level={3} subtitle={t('form.subtitle')} className="mb-6 md:mb-10">
@@ -100,11 +123,6 @@ export default function ContactForm() {
required required
/> />
</div> </div>
{status === 'error' && (
<div className="md:col-span-2 text-red-500 text-sm font-bold">
{t('form.error') || 'An error occurred. Please try again later.'}
</div>
)}
<div className="md:col-span-2 pt-2 md:pt-4"> <div className="md:col-span-2 pt-2 md:pt-4">
<Button <Button
type="submit" type="submit"

26
components/RequestQuoteForm.tsx
View File

@@ -71,6 +71,32 @@ export default function RequestQuoteForm({ productName }: RequestQuoteFormProps)
); );
} }
if (status === 'error') {
return (
<div className="bg-destructive/5 border border-destructive/20 text-destructive p-4 rounded-xl text-center animate-fade-in !mt-0">
<div className="w-10 h-10 bg-destructive rounded-full flex items-center justify-center mx-auto mb-3 shadow-lg shadow-destructive/20">
<svg className="w-5 h-5 text-destructive-foreground" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3">
<circle cx="12" cy="12" r="10" />
<line x1="15" y1="9" x2="9" y2="15" />
<line x1="9" y1="9" x2="15" y2="15" />
</svg>
</div>
<h3 className="text-base font-extrabold mb-1 tracking-tight !mt-0 text-destructive">{t('errorTitle') || 'Submission Failed'}</h3>
<p className="text-destructive/80 text-xs leading-tight mb-4 !mt-0">
{t('errorDesc') || 'Something went wrong. Please try again.'}
</p>
<button
onClick={() => setStatus('idle')}
className="inline-flex items-center text-[9px] font-bold uppercase tracking-[0.2em] text-destructive hover:text-destructive/80 transition-colors group"
>
<span className="border-b-2 border-destructive/10 group-hover:border-destructive/30 transition-colors pb-1">
{t('tryAgain') || 'Try Again'}
</span>
</button>
</div>
);
}
return ( return (
<form onSubmit={handleSubmit} className="space-y-3 !mt-0"> <form onSubmit={handleSubmit} className="space-y-3 !mt-0">
<div className="space-y-2 !mt-0"> <div className="space-y-2 !mt-0">