diff --git a/src/blocks/ResumeContactBlock/Renderer/ContactForm.client.tsx b/src/blocks/ResumeContactBlock/Renderer/ContactForm.client.tsx new file mode 100644 index 0000000..e08251f --- /dev/null +++ b/src/blocks/ResumeContactBlock/Renderer/ContactForm.client.tsx @@ -0,0 +1,138 @@ +'use client' + +import { useActionState, useEffect, useId, useRef } from 'react' + +import { Button } from '@/components/Button' +import { type ContactFormState, submitContactForm } from '@/lib/actions/submitContactForm' +import { cn } from '@/lib/cn' + +const initialState: ContactFormState = { + status: 'idle', +} + +const inputStyles = cn( + 'w-full rounded-none border border-border bg-transparent px-4 py-3', + 'text-base placeholder:text-muted-foreground', + 'outline-none transition-colors', + 'focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30', + 'aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20', +) + +export const ContactForm = () => { + const [state, formAction, isPending] = useActionState(submitContactForm, initialState) + const formRef = useRef(null) + const nameId = useId() + const emailId = useId() + const messageId = useId() + const companyId = useId() + + useEffect(() => { + if (state.status === 'success') { + formRef.current?.reset() + } + }, [ + state.status, + ]) + + return ( +
+
+ + + {state.fieldErrors?.name && ( +

+ {state.fieldErrors.name} +

+ )} +
+ +
+ + + {state.fieldErrors?.email && ( +

+ {state.fieldErrors.email} +

+ )} +
+ +
+ +