diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Buttons/Button/Button.tsx | 2 | ||||
| -rw-r--r-- | src/components/CommentForm/CommentForm.tsx | 58 |
2 files changed, 59 insertions, 1 deletions
diff --git a/src/components/Buttons/Button/Button.tsx b/src/components/Buttons/Button/Button.tsx index c186d2a..8256e6b 100644 --- a/src/components/Buttons/Button/Button.tsx +++ b/src/components/Buttons/Button/Button.tsx @@ -9,7 +9,7 @@ const Button = ({ }: { children: ReactNode; clickHandler: any; - isDisabled: boolean; + isDisabled?: boolean; isPrimary?: boolean; }) => { const classes = `${styles.btn} ${ diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx new file mode 100644 index 0000000..be6f5a6 --- /dev/null +++ b/src/components/CommentForm/CommentForm.tsx @@ -0,0 +1,58 @@ +import { ButtonSubmit } from '@components/Buttons'; +import { Form, FormItem, Input, TextArea } from '@components/Form'; +import { t } from '@lingui/macro'; +import { useState } from 'react'; + +const CommentForm = () => { + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [website, setWebsite] = useState(''); + const [message, setMessage] = useState(''); + + return ( + <Form> + <FormItem> + <Input + id="commenter-name" + name="commenter-name" + label={t`Name`} + required={true} + value={name} + setValue={setName} + /> + </FormItem> + <FormItem> + <Input + id="commenter-email" + name="commenter-email" + label={t`Email`} + required={true} + value={email} + setValue={setEmail} + /> + </FormItem> + <FormItem> + <Input + id="commenter-website" + name="commenter-website" + label={t`Website`} + value={website} + setValue={setWebsite} + /> + </FormItem> + <FormItem> + <TextArea + id="commenter-message" + name="commenter-message" + label={t`Comment`} + value={message} + setValue={setMessage} + required={true} + /> + </FormItem> + <ButtonSubmit>{t`Send`}</ButtonSubmit> + </Form> + ); +}; + +export default CommentForm; |
