added months passed to comments

src/components/comment/CommentDistance/index.tsx

@@ -0,0 +1,36 @@
+import React, { FC, memo, useMemo } from 'react';
+
+import { differenceInDays, formatDistance } from 'date-fns';
+import ru from 'date-fns/locale/ru';
+
+import styles from './styles.module.scss';
+
+interface CommentDistanceProps {
+  firstDate?: Date;
+  secondDate?: Date;
+}
+
+const CommentDistance: FC<CommentDistanceProps> = memo(({ firstDate, secondDate }) => {
+  const distance = useMemo(() => {
+    if (!firstDate || !secondDate) {
+      return undefined;
+    }
+
+    if (differenceInDays(secondDate, firstDate) < 30) {
+      return undefined;
+    }
+
+    return formatDistance(secondDate, firstDate, {
+      locale: ru,
+      addSuffix: false,
+    });
+  }, []);
+
+  if (!distance) {
+    return null;
+  }
+
+  return <div className={styles.bar}>прошло {distance}</div>;
+});
+
+export { CommentDistance };

src/components/comment/CommentDistance/styles.module.scss

@@ -0,0 +1,12 @@
+@import "src/styles/variables";
+
+.bar {
+  @include inner_shadow;
+
+  font: $font_12_regular;
+  color: darken(white, 50%);
+  background: $content_bg;
+  display: inline-flex;
+  padding: 1px 10px 3px;
+  border-radius: 12px;
+}