chore: add a comment form to posts

3 files changed, 62 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;
diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 57982e9..05da913 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -1,3 +1,4 @@
+import CommentForm from '@components/CommentForm/CommentForm';
 import CommentsList from '@components/CommentsList/CommentsList';
 import Layout from '@components/Layouts/Layout';
 import PostFooter from '@components/PostFooter/PostFooter';
@@ -30,6 +31,8 @@ const SingleArticle: NextPageWithLayout<ArticleProps> = ({ post }) => {
       <section>
         <h2>{t`Comments`}</h2>
         <CommentsList comments={comments} />
+        <h2>{t`Leave a comment`}</h2>
+        <CommentForm />
       </section>
     </article>
   );