feat(discussion): add reply form to discussion page

src/features/reply-form/index.tsx

@@ -10,7 +10,7 @@ import cls from './index.module.scss';
 // @ts-ignore
 export interface ReplyFormProps extends FormHTMLAttributes<HTMLFormElement> {
   postId: string;
-  maxLength?: number;
+  maxLength: number;
   onSubmit?: (payload: {postId: string; value: string}) => void;
 }
 

src/pages/discussion/page.module.scss

@@ -1,5 +1,4 @@
 .head {
   display: flex;
   flex-direction: column;
-  margin-bottom: 50px;
 }

src/pages/discussion/page.tsx

@@ -2,6 +2,8 @@ import {useList, useUnit} from 'effector-react';
 
 import {Post} from '~/widgets/post';
 
+import {ReplyForm} from '~/features/reply-form';
+
 import {Container, ContainerSize, Page, Text, TextSize} from '~/shared/ui';
 import {Card, CardSize} from '~/shared/ui/card';
 
@@ -50,7 +52,13 @@ export const DiscussionPage = () => {
         </Card>
       </Container>
 
-      <Container size={ContainerSize.M}>{comments}</Container>
+      <Container size={ContainerSize.M} style={{marginTop: 50, marginBottom: 20}}>
+        {comments}
+      </Container>
+
+      <Container size={ContainerSize.M}>
+        <ReplyForm postId={discussion.id!} maxLength={500}></ReplyForm>
+      </Container>
     </Page>
   );
 };

src/shared/ui/text-area/index.module.scss

@@ -8,9 +8,10 @@
   width: 100%;
   height: auto;
   min-height: 80px;
-  padding: 20px;
+  padding: 15px;
   border-radius: 10px;
-  background-color: var(--color-gray-dark);
+  background-color: var(--color-black);
   color: var(--color-gray-lightest);
   font: var(--font-s);
+  border: 1px solid rgba(255 255 255 / 7%);
 }

src/shared/ui/text-area/index.tsx

@@ -24,6 +24,10 @@ export const TextArea = (props: TextAreaProps) => {
     <textarea
       className={classNames(cls.autoresize, cls.textarea, className)}
       onInput={onTextareaInput}
+      autoComplete={'off'}
+      autoCorrect={'off'}
+      autoCapitalize={'off'}
+      spellCheck={false}
       {...otherProps}
     />
   );