made boris graphic stats

src/components/boris/BorisGraphicStats/index.tsx

@@ -0,0 +1,46 @@
+import React, { VFC } from 'react';
+
+import { parseISO } from 'date-fns/esm';
+
+import { BasicCurveChart } from '~/components/charts/BasicCurveChart';
+import { StatsCard } from '~/components/charts/StatsCard';
+import { StatsCountdownCard } from '~/components/charts/StatsCountdownCard';
+import { foundationDate } from '~/constants/boris/constants';
+
+import styles from './styles.module.scss';
+
+interface BorisGraphicStatsProps {
+  totalNodes: number;
+  nodesByMonth: number[];
+  totalComments: number;
+  commentsByMonth: number[];
+}
+
+const BorisGraphicStats: VFC<BorisGraphicStatsProps> = ({
+  totalComments,
+  commentsByMonth,
+  totalNodes,
+  nodesByMonth,
+}) => {
+  return (
+    <div className={styles.group}>
+      <StatsCard
+        background={<BasicCurveChart items={nodesByMonth} />}
+        title="Посты"
+        total={totalNodes}
+        className={styles.card}
+      />
+
+      <StatsCard
+        background={<BasicCurveChart items={commentsByMonth} />}
+        title="Комментарии"
+        total={totalComments}
+        className={styles.card}
+      />
+
+      <StatsCountdownCard since={parseISO(foundationDate)} className={styles.card} />
+    </div>
+  );
+};
+
+export { BorisGraphicStats };

src/components/boris/BorisGraphicStats/styles.module.scss

@@ -0,0 +1,12 @@
+@import 'src/styles/variables';
+
+.group {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  grid-column-gap: $gap;
+  grid-row-gap: $gap;
+}
+
+.card {
+  height: 150px;
+}