feat(components): add a Time component

Instead of using helpers functions to format the date each time we need
to use a time element, it makes more sense to create a new component
dedicated to this task.

1 files changed, 2 insertions, 18 deletions

diff --git a/src/components/organisms/layout/comment.tsx b/src/components/organisms/layout/comment.tsx
index e1ea6b5..cb2f16f 100644
--- a/src/components/organisms/layout/comment.tsx
+++ b/src/components/organisms/layout/comment.tsx
@@ -5,9 +5,8 @@ import { type FC, useCallback, useState } from 'react';
 import { useIntl } from 'react-intl';
 import type { Comment as CommentSchema, WithContext } from 'schema-dts';
 import type { SingleComment } from '../../../types';
-import { getFormattedDate, getFormattedTime } from '../../../utils/helpers';
 import { useSettings } from '../../../utils/hooks';
-import { Button, Link } from '../../atoms';
+import { Button, Link, Time } from '../../atoms';
 import { MetaList } from '../../molecules';
 import { CommentForm, type CommentFormProps } from '../forms';
 import styles from './comment.module.scss';
@@ -61,21 +60,6 @@ export const UserComment: FC<UserCommentProps> = ({
   }
 
   const { author, date } = meta;
-  const [publicationDate, publicationTime] = date.split(' ');
-  const isoDateTime = new Date(
-    `${publicationDate}T${publicationTime}`
-  ).toISOString();
-  const commentDate = intl.formatMessage(
-    {
-      defaultMessage: '{date} at {time}',
-      description: 'Comment: publication date and time',
-      id: 'Ld6yMP',
-    },
-    {
-      date: getFormattedDate(publicationDate),
-      time: getFormattedTime(`${publicationDate}T${publicationTime}`),
-    }
-  );
 
   const buttonLabel = isReplying
     ? intl.formatMessage({
@@ -163,7 +147,7 @@ export const UserComment: FC<UserCommentProps> = ({
               }),
               value: (
                 <Link href={`#comment-${id}`}>
-                  <time dateTime={isoDateTime}>{commentDate}</time>
+                  <Time date={date} showTime />
                 </Link>
               ),
             },