fixed youtube block

src/components/comment/CommentEmbedBlock/index.tsx

@@ -0,0 +1,23 @@
+import React, { FC, memo } from 'react';
+import { ICommentBlock } from '~/constants/comment';
+import styles from './styles.scss';
+
+interface IProps {
+  block: ICommentBlock;
+}
+
+const CommentEmbedBlock: FC<IProps> = memo(({ block }) => {
+  const link = block.content.match(
+    /(https?:\/\/(www\.)?(youtube\.com|youtu\.be)\/(watch)?(\?v=)?[\w\-]+)/gi
+  );
+
+  return (
+    <div className={styles.text}>
+      <a href={link[0]} target="_blank">
+        {link[0]}
+      </a>
+    </div>
+  );
+});
+
+export { CommentEmbedBlock };

src/components/comment/CommentEmbedBlock/styles.scss

@@ -0,0 +1,3 @@
+.text {
+  padding: 0 $gap;
+}

src/components/comment/CommentTextBlock/styles.scss

@@ -1,5 +1,5 @@
 .text {
-  padding: $gap;
+  padding: 0 $gap;
   font-weight: 300;
   font: $font_16_medium;
   line-height: 20px;

src/components/node/CommentContent/index.tsx

@@ -31,7 +31,7 @@ const CommentContent: FC<IProps> = memo(({ comment }) => {
   return (
     <>
       {comment.text && (
-        <div className={styles.block}>
+        <Group className={styles.block}>
           {formatCommentText(path(['user', 'username'], comment), comment.text).map(
             (block, key) =>
               COMMENT_BLOCK_RENDERERS[block.type] &&
@@ -39,7 +39,7 @@ const CommentContent: FC<IProps> = memo(({ comment }) => {
           )}
 
           <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
-        </div>
+        </Group>
       )}
 
       {groupped.image && groupped.image.length > 0 && (

src/components/node/CommentContent/styles.scss

@@ -11,6 +11,7 @@
   padding-bottom: 10px;
   box-sizing: border-box;
   flex-direction: column;
+  padding: $gap 0;
 
   &:first-child {
     border-top-right-radius: $radius;