44 lines
No EOL
1.3 KiB
TypeScript
44 lines
No EOL
1.3 KiB
TypeScript
'use client'
|
|
|
|
import { Input } from '@/components/Input/Input'
|
|
import { Button } from '@/components/Button/Button'
|
|
import styles from "./styles.module.scss"
|
|
import classNames from 'classnames'
|
|
import { send } from '@/utils/actions'
|
|
import { useActionState } from 'react'
|
|
|
|
type ContactFormProps = {
|
|
schema?: "base" | "contrast",
|
|
toEmail: string
|
|
}
|
|
|
|
const initialState = {
|
|
message: '',
|
|
}
|
|
|
|
export const ContactForm = ({schema, toEmail}: ContactFormProps) => {
|
|
|
|
const sendWithEmail = send.bind(null, toEmail);
|
|
const [state, formAction, pending] = useActionState(sendWithEmail, initialState)
|
|
|
|
return (
|
|
<form action={formAction}>
|
|
<div className={classNames(styles.row, styles.firsRow)}>
|
|
<Input name={"name"} type={"text"} placeholder={"Name"} />
|
|
<Input name={"email"} type={"email"} placeholder={"E-Mail Adresse"} />
|
|
</div>
|
|
<div className={styles.row}>
|
|
<Input name={"subject"} type={"text"} placeholder={"Thema"} />
|
|
</div>
|
|
<div className={styles.row}>
|
|
<Input name={"message"} type={"textarea"} placeholder={"Ihre Nachricht"} />
|
|
</div>
|
|
<p>
|
|
{state.message}
|
|
</p>
|
|
<div className={styles.row}>
|
|
<Button size={"lg"} type={"submit"} schema={schema} disabled={pending}>Abschicken</Button>
|
|
</div>
|
|
</form>
|
|
)
|
|
} |