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.

7 files changed, 23 insertions, 104 deletions

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index bce493b..dea240f 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -15,6 +15,7 @@ import {
   Sharing,
   Spinner,
   type MetaItemData,
+  Time,
 } from '../../components';
 import {
   getAllArticlesSlugs,
@@ -26,7 +27,6 @@ import type { Article, NextPageWithLayout, SingleComment } from '../../types';
 import { ROUTES } from '../../utils/constants';
 import {
   getBlogSchema,
-  getFormattedDate,
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
@@ -83,18 +83,6 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
   const { content, id, intro, meta, title } = article;
   const { author, commentsCount, cover, dates, seo, thematics, topics } = meta;
 
-  /**
-   * 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 headerMeta: (MetaItemData | undefined)[] = [
     author
       ? {
@@ -114,7 +102,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
         description: 'ArticlePage: publication date label',
         id: 'RecdwX',
       }),
-      value: getDate(dates.publication),
+      value: <Time date={dates.publication} />,
     },
     dates.update && dates.publication !== dates.update
       ? {
@@ -124,7 +112,7 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
             description: 'ArticlePage: update date label',
             id: 'ZAqGZ6',
           }),
-          value: getDate(dates.update),
+          value: <Time date={dates.update} />,
         }
       : undefined,
     {
diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx
index 652b913..d9f7031 100644
--- a/src/pages/cv.tsx
+++ b/src/pages/cv.tsx
@@ -20,13 +20,13 @@ import {
   SocialMedia,
   ListItem,
   type MetaItemData,
+  Time,
 } from '../components';
 import CVContent, { data, meta } from '../content/pages/cv.mdx';
 import styles from '../styles/pages/cv.module.scss';
 import type { NextPageWithLayout } from '../types';
 import { PERSONAL_LINKS, ROUTES } from '../utils/constants';
 import {
-  getFormattedDate,
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
@@ -153,18 +153,6 @@ const CVPage: NextPageWithLayout = () => {
     id: '+Dre5J',
   });
 
-  /**
-   * 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 headerMeta: (MetaItemData | undefined)[] = [
     {
       id: 'publication-date',
@@ -173,7 +161,7 @@ const CVPage: NextPageWithLayout = () => {
         description: 'Page: publication date label',
         id: '4QbTDq',
       }),
-      value: getDate(dates.publication),
+      value: <Time date={dates.publication} />,
     },
     dates.update
       ? {
@@ -183,7 +171,7 @@ const CVPage: NextPageWithLayout = () => {
             description: 'Page: update date label',
             id: 'Ez8Qim',
           }),
-          value: getDate(dates.update),
+          value: <Time date={dates.update} />,
         }
       : undefined,
   ];
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index cdc51c5..fb6ba9a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -21,17 +21,14 @@ import {
   type SectionProps,
   Heading,
   Figure,
+  Time,
 } from '../components';
 import HomePageContent from '../content/pages/homepage.mdx';
 import { getArticlesCard } from '../services/graphql';
 import styles from '../styles/pages/home.module.scss';
 import type { ArticleCard, NextPageWithLayout } from '../types';
 import { PERSONAL_LINKS, ROUTES } from '../utils/constants';
-import {
-  getFormattedDate,
-  getSchemaJson,
-  getWebPageSchema,
-} from '../utils/helpers';
+import { getSchemaJson, getWebPageSchema } from '../utils/helpers';
 import { loadTranslation, type Messages } from '../utils/helpers/server';
 import { useBreadcrumb, useSettings } from '../utils/hooks';
 
@@ -301,8 +298,6 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
    */
   const getRecentPosts = (): JSX.Element => {
     const posts: CardsListItem[] = recentPosts.map((post) => {
-      const isoDate = new Date(`${post.dates.publication}`).toISOString();
-
       return {
         cover: post.cover,
         id: post.slug,
@@ -310,11 +305,7 @@ const HomePage: NextPageWithLayout<HomeProps> = ({ recentPosts }) => {
           {
             id: 'publication-date',
             label: publicationDate,
-            value: (
-              <time dateTime={isoDate}>
-                {getFormattedDate(post.dates.publication)}
-              </time>
-            ),
+            value: <Time date={post.dates.publication} />,
           },
         ],
         title: post.title,
diff --git a/src/pages/mentions-legales.tsx b/src/pages/mentions-legales.tsx
index 25c2dd9..4e14d90 100644
--- a/src/pages/mentions-legales.tsx
+++ b/src/pages/mentions-legales.tsx
@@ -12,12 +12,12 @@ import {
   PageLayout,
   Figure,
   type MetaItemData,
+  Time,
 } from '../components';
 import LegalNoticeContent, { meta } from '../content/pages/legal-notice.mdx';
 import type { NextPageWithLayout } from '../types';
 import { ROUTES } from '../utils/constants';
 import {
-  getFormattedDate,
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
@@ -47,18 +47,6 @@ const LegalNoticePage: NextPageWithLayout = () => {
     url: ROUTES.LEGAL_NOTICE,
   });
 
-  /**
-   * 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 headerMeta: (MetaItemData | undefined)[] = [
     {
       id: 'publication-date',
@@ -67,7 +55,7 @@ const LegalNoticePage: NextPageWithLayout = () => {
         description: 'Page: publication date label',
         id: '4QbTDq',
       }),
-      value: getDate(dates.publication),
+      value: <Time date={dates.publication} />,
     },
     dates.update
       ? {
@@ -77,7 +65,7 @@ const LegalNoticePage: NextPageWithLayout = () => {
             description: 'Page: update date label',
             id: 'Ez8Qim',
           }),
-          value: getDate(dates.update),
+          value: <Time date={dates.update} />,
         }
       : undefined,
   ];
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index 6ef3df5..3d3c57e 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -24,12 +24,12 @@ import {
   Figure,
   type MetaItemData,
   type MetaValues,
+  Time,
 } from '../../components';
 import styles from '../../styles/pages/project.module.scss';
 import type { NextPageWithLayout, ProjectPreview, Repos } from '../../types';
 import { ROUTES } from '../../utils/constants';
 import {
-  getFormattedDate,
   getSchemaJson,
   getSinglePageSchema,
   getWebPageSchema,
@@ -167,18 +167,6 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
     url: `${website.url}${asPath}`,
   };
 
-  /**
-   * 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 headerMeta: (MetaItemData | undefined)[] = [
     {
       id: 'publication-date',
@@ -187,7 +175,7 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
         description: 'ProjectsPage: publication date label',
         id: 'HxZvY4',
       }),
-      value: getDate(dates.publication),
+      value: <Time date={dates.publication} />,
     },
     dates.update && dates.update !== dates.publication
       ? {
@@ -197,7 +185,7 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
             description: 'ProjectsPage: update date label',
             id: 'wQrvgw',
           }),
-          value: getDate(dates.update),
+          value: <Time date={dates.update} />,
         }
       : undefined,
   ];
@@ -299,7 +287,7 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
         description: 'ProjectsPage: creation date label',
         id: 'wVFA4m',
       }),
-      value: getDate(data.created_at),
+      value: <Time date={data.created_at} />,
     },
     {
       id: 'update-date',
@@ -308,7 +296,7 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
         description: 'ProjectsPage: update date label',
         id: 'wQrvgw',
       }),
-      value: getDate(data.updated_at),
+      value: <Time date={data.updated_at} />,
     },
     license
       ? {
diff --git a/src/pages/sujet/[slug].tsx b/src/pages/sujet/[slug].tsx
index cacc972..87c3340 100644
--- a/src/pages/sujet/[slug].tsx
+++ b/src/pages/sujet/[slug].tsx
@@ -13,6 +13,7 @@ import {
   type MetaItemData,
   PageLayout,
   PostsList,
+  Time,
 } from '../../components';
 import {
   getAllTopicsSlugs,
@@ -24,7 +25,6 @@ import styles from '../../styles/pages/topic.module.scss';
 import type { NextPageWithLayout, PageLink, Topic } from '../../types';
 import { ROUTES } from '../../utils/constants';
 import {
-  getFormattedDate,
   getLinksListItems,
   getPageLinkFromRawData,
   getPostsWithUrl,
@@ -60,18 +60,6 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
     url: `${ROUTES.TOPICS}/${slug}`,
   });
 
-  /**
-   * 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 headerMeta: (MetaItemData | undefined)[] = [
     {
       id: 'publication-date',
@@ -80,7 +68,7 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
         description: 'TopicPage: publication date label',
         id: 'KV+NMZ',
       }),
-      value: getDate(dates.publication),
+      value: <Time date={dates.publication} />,
     },
     dates.update
       ? {
@@ -90,7 +78,7 @@ const TopicPage: NextPageWithLayout<TopicPageProps> = ({
             description: 'TopicPage: update date label',
             id: '9DfuHk',
           }),
-          value: getDate(dates.update),
+          value: <Time date={dates.update} />,
         }
       : undefined,
     officialWebsite
diff --git a/src/pages/thematique/[slug].tsx b/src/pages/thematique/[slug].tsx
index a5badf3..8e21ff6 100644
--- a/src/pages/thematique/[slug].tsx
+++ b/src/pages/thematique/[slug].tsx
@@ -12,6 +12,7 @@ import {
   type MetaItemData,
   PageLayout,
   PostsList,
+  Time,
 } from '../../components';
 import {
   getAllThematicsSlugs,
@@ -22,7 +23,6 @@ import {
 import type { NextPageWithLayout, PageLink, Thematic } from '../../types';
 import { ROUTES } from '../../utils/constants';
 import {
-  getFormattedDate,
   getLinksListItems,
   getPageLinkFromRawData,
   getPostsWithUrl,
@@ -51,18 +51,6 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
     url: `${ROUTES.THEMATICS.INDEX}/${slug}`,
   });
 
-  /**
-   * 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 headerMeta: (MetaItemData | undefined)[] = [
     {
       id: 'publication-date',
@@ -71,7 +59,7 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
         description: 'ThematicPage: publication date label',
         id: 'UTGhUU',
       }),
-      value: getDate(dates.publication),
+      value: <Time date={dates.publication} />,
     },
     dates.update
       ? {
@@ -81,7 +69,7 @@ const ThematicPage: NextPageWithLayout<ThematicPageProps> = ({
             description: 'ThematicPage: update date label',
             id: '24FIsG',
           }),
-          value: getDate(dates.update),
+          value: <Time date={dates.update} />,
         }
       : undefined,
     articles