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.

4 files changed, 7 insertions, 45 deletions

diff --git a/src/components/organisms/layout/comment.fixture.ts b/src/components/organisms/layout/comment.fixture.ts
index f626be9..bb18d22 100644
--- a/src/components/organisms/layout/comment.fixture.ts
+++ b/src/components/organisms/layout/comment.fixture.ts
@@ -1,4 +1,3 @@
-import { getFormattedDate, getFormattedTime } from '../../../utils/helpers';
 import type { UserCommentProps } from './comment';
 
 export const author = {
@@ -36,6 +35,3 @@ export const data: UserCommentProps = {
   parentId: 0,
   saveComment,
 };
-
-export const formattedDate = getFormattedDate(date);
-export const formattedTime = getFormattedTime(date);
diff --git a/src/components/organisms/layout/comment.test.tsx b/src/components/organisms/layout/comment.test.tsx
index b64f84a..0e0ea3a 100644
--- a/src/components/organisms/layout/comment.test.tsx
+++ b/src/components/organisms/layout/comment.test.tsx
@@ -1,13 +1,7 @@
 import { describe, expect, it } from '@jest/globals';
 import { render, screen as rtlScreen } from '../../../../tests/utils';
 import { UserComment } from './comment';
-import {
-  author,
-  data,
-  formattedDate,
-  formattedTime,
-  id,
-} from './comment.fixture';
+import { author, data, id } from './comment.fixture';
 
 describe('UserComment', () => {
   it('renders an avatar', () => {
@@ -29,7 +23,7 @@ describe('UserComment', () => {
     render(<UserComment canReply={true} {...data} />);
     expect(
       rtlScreen.getByRole('link', {
-        name: `${formattedDate} at ${formattedTime}`,
+        name: /\sat\s/,
       })
     ).toHaveAttribute('href', `#comment-${id}`);
   });
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>
               ),
             },
diff --git a/src/components/organisms/layout/summary.tsx b/src/components/organisms/layout/summary.tsx
index f5c16cd..4fe7632 100644
--- a/src/components/organisms/layout/summary.tsx
+++ b/src/components/organisms/layout/summary.tsx
@@ -2,7 +2,6 @@ import NextImage, { type ImageProps as NextImageProps } from 'next/image';
 import type { FC, ReactNode } from 'react';
 import { useIntl } from 'react-intl';
 import type { Article, Meta as MetaType } from '../../../types';
-import { getFormattedDate } from '../../../utils/helpers';
 import { useReadingTime } from '../../../utils/hooks';
 import {
   ButtonLink,
@@ -11,6 +10,7 @@ import {
   Icon,
   Link,
   Figure,
+  Time,
 } from '../../atoms';
 import { MetaList, type MetaItemData } from '../../molecules';
 import styles from './summary.module.scss';
@@ -72,18 +72,6 @@ export const Summary: FC<SummaryProps> = ({
   );
   const readingTime = useReadingTime(meta.wordsCount, true);
 
-  /**
-   * Retrieve a formatted date (and time).
-   *
-   * @param {string} date - A date string.
-   * @returns {JSX.Element} The formatted date wrapped in a time element.
-   */
-  const getDate = (date: string): JSX.Element => {
-    const isoDate = new Date(`${date}`).toISOString();
-
-    return <time dateTime={isoDate}>{getFormattedDate(date)}</time>;
-  };
-
   const getMetaItems = (): MetaItemData[] => {
     const summaryMeta: MetaItemData[] = [
       {
@@ -93,7 +81,7 @@ export const Summary: FC<SummaryProps> = ({
           description: 'Summary: publication date label',
           id: 'TvQ2Ee',
         }),
-        value: getDate(meta.dates.publication),
+        value: <Time date={meta.dates.publication} />,
       },
     ];
 
@@ -105,7 +93,7 @@ export const Summary: FC<SummaryProps> = ({
           description: 'Summary: update date label',
           id: 'f0Z/Po',
         }),
-        value: getDate(meta.dates.update),
+        value: <Time date={meta.dates.update} />,
       });
 
     summaryMeta.push({