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 (
<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">
@@ -100,11 +123,6 @@ export default function ContactForm() {
required
/>
</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">
<Button
type="submit"