feat(components): add new component

package.json

@@ -28,7 +28,8 @@
     }
   },
   "dependencies": {
-    "clsx": "^1.1.1"
+    "clsx": "^1.1.1",
+    "plural-ru": "^2.0.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.13.14",

src/__docz__/formatted-date.mdx

@@ -0,0 +1,51 @@
+---
+name: FormattedDate
+route: /formatted-date
+---
+import { Playground, Props } from 'docz'
+import { FormattedDate }  from '../';
+
+
+# FormattedDate
+
+## Properties
+
+<Props of={FormattedDate} />
+
+## Date from string
+
+<Playground>
+    {() => {
+        const dateFromServer = '2022-10-10T17:33:32.877Z';
+        return <FormattedDate date={new Date(dateFromServer)}/>;
+    }}
+</Playground>
+
+## Today
+
+<Playground>
+    {() => {
+        const today = new Date();
+        return <FormattedDate date={new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes() - 1, 0)}/>;
+    }}
+</Playground>
+
+## Yesterday
+
+<Playground>
+    {() => {
+        const today = new Date();
+        const yesterday = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1, today.getHours(), today.getMinutes() - 1, 0);
+        return <FormattedDate date={yesterday}/>;
+    }}
+</Playground>
+
+## 5 days ago
+
+<Playground>
+    {() => {
+        const today = new Date();
+        const fiveDaysAgo = new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5, today.getHours(), today.getMinutes() - 1, 0);
+        return <FormattedDate date={fiveDaysAgo}/>;
+    }}
+</Playground>

src/index.tsx

@@ -2,6 +2,7 @@ import { Button } from './ui/button';
 import { Logo } from './ui/logo';
 import { ConstructorElement } from './ui/constructor-element';
 import { Tab } from './ui/tab';
+import { FormattedDate } from './ui/formatted-date/formatted-date';
 import { Input } from './ui/input';
 import { Counter } from './ui/counter';
 import { EmailInput } from './ui/email-input';
@@ -35,6 +36,7 @@ export {
     Logo,
     ConstructorElement,
     Tab,
+    FormattedDate,
     Input,
     Counter,
     EmailInput,

src/ui/formatted-date/formatted-date.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { getFormattedDate, isYesterday, isToday, getFormattedTime } from './formatted-date.utils';
+
+export const FormattedDate: React.FC<{
+    date: Date;
+    className?: string;
+}> = ({ date, className }) => {
+    if (isToday(date)) {
+        return <span className={className}>Сегодня, {getFormattedTime(date)}</span>;
+    }
+
+    if (isYesterday(date)) {
+        return <span className={className}>Вчера, {getFormattedTime(date)}</span>;
+    }
+
+    return <span className={className}>{getFormattedDate(date)}</span>;
+};

src/ui/formatted-date/formatted-date.utils.tsx

@@ -0,0 +1,15 @@
+import plural from 'plural-ru';
+
+const getDiffDays = (date: Date) =>
+    Math.floor((new Date().getTime() - date.getTime()) / (1000 * 60 * 60 * 24));
+
+export const getFormattedTime = (date: Date): string =>
+    `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
+
+export const getFormattedDate = (date: Date): string => {
+    const diffDays = getDiffDays(date);
+    return `${plural(diffDays, '%d день', '%d дня', '%d дней')} назад, ${getFormattedTime(date)}`;
+};
+
+export const isToday = (date: Date): boolean => getDiffDays(date) === 0;
+export const isYesterday = (date: Date): boolean => getDiffDays(date) === 1;