chore(comments): handle comment reply

2 files changed, 37 insertions, 11 deletions

diff --git a/src/components/CommentForm/CommentForm.module.scss b/src/components/CommentForm/CommentForm.module.scss
index 2330ca2..922923a 100644
--- a/src/components/CommentForm/CommentForm.module.scss
+++ b/src/components/CommentForm/CommentForm.module.scss
@@ -3,6 +3,19 @@
 .wrapper {
   width: min(calc(100vw - (var(--spacing-md) * 2)), fun.convert-px(500));
   margin: auto;
+
+  &--reply {
+    width: 100%;
+    margin-top: var(--spacing-sm);
+    padding: var(--spacing-md);
+    position: relative;
+    background: var(--color-bg);
+    border: fun.convert-px(1) solid var(--color-border-light);
+    box-shadow: fun.convert-px(3) fun.convert-px(3) 0 0
+        var(--color-shadow-lighter),
+      fun.convert-px(4) fun.convert-px(4) fun.convert-px(3) fun.convert-px(-2)
+        var(--color-shadow-light);
+  }
 }
 
 .title {
diff --git a/src/components/CommentForm/CommentForm.tsx b/src/components/CommentForm/CommentForm.tsx
index ea02306..1ed219c 100644
--- a/src/components/CommentForm/CommentForm.tsx
+++ b/src/components/CommentForm/CommentForm.tsx
@@ -3,16 +3,21 @@ import { Form, FormItem, Input, TextArea } from '@components/Form';
 import Notice from '@components/Notice/Notice';
 import { t } from '@lingui/macro';
 import { createComment } from '@services/graphql/mutations';
-import { useState } from 'react';
+import { ForwardedRef, forwardRef, useState } from 'react';
 import styles from './CommentForm.module.scss';
 
-const CommentForm = ({
-  articleId,
-  parentId = 0,
-}: {
-  articleId: number;
-  parentId?: number;
-}) => {
+const CommentForm = (
+  {
+    articleId,
+    parentId = 0,
+    isReply = false,
+  }: {
+    articleId: number;
+    parentId?: number;
+    isReply?: boolean;
+  },
+  ref: ForwardedRef<HTMLInputElement>
+) => {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
   const [website, setWebsite] = useState('');
@@ -57,10 +62,17 @@ const CommentForm = ({
     }
   };
 
+  const wrapperClasses = `${styles.wrapper} ${
+    isReply ? styles['wrapper--reply'] : ''
+  }`;
+
   return (
-    <div className={styles.wrapper}>
+    <div className={wrapperClasses}>
       <h2 className={styles.title}>{t`Leave a comment`}</h2>
-      <Form submitHandler={submitHandler}>
+      <Form
+        submitHandler={submitHandler}
+        modifier={isReply ? 'centered' : undefined}
+      >
         <FormItem>
           <Input
             id="commenter-name"
@@ -69,6 +81,7 @@ const CommentForm = ({
             required={true}
             value={name}
             setValue={setName}
+            ref={ref}
           />
         </FormItem>
         <FormItem>
@@ -111,4 +124,4 @@ const CommentForm = ({
   );
 };
 
-export default CommentForm;
+export default forwardRef(CommentForm);