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, 16 insertions, 23 deletions

diff --git a/src/components/atoms/layout/copyright.tsx b/src/components/atoms/layout/copyright.tsx
index c60ff8b..3d56059 100644
--- a/src/components/atoms/layout/copyright.tsx
+++ b/src/components/atoms/layout/copyright.tsx
@@ -1,5 +1,6 @@
 import type { FC, ReactNode } from 'react';
 import styles from './copyright.module.scss';
+import { Time } from './time';
 
 export type CopyrightDates = {
   /**
@@ -32,26 +33,18 @@ export type CopyrightProps = {
  *
  * Renders a copyright information (owner, dates, license icon).
  */
-export const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => {
-  const getFormattedDate = (date: string) => {
-    const datetime = new Date(date).toISOString();
-
-    return <time dateTime={datetime}>{date}</time>;
-  };
-
-  return (
-    <div className={styles.wrapper}>
-      <span className={styles.owner}>{owner}</span>
-      {icon}
-      {getFormattedDate(dates.start)}
-      {dates.end ? (
-        <>
-          <span>-</span>
-          {getFormattedDate(dates.end)}
-        </>
-      ) : (
-        ''
-      )}
-    </div>
-  );
-};
+export const Copyright: FC<CopyrightProps> = ({ owner, dates, icon }) => (
+  <div className={styles.wrapper}>
+    <span className={styles.owner}>{owner}</span>
+    {icon}
+    <Time date={dates.start} hideDay hideMonth />
+    {dates.end ? (
+      <>
+        <span>-</span>
+        <Time date={dates.end} hideDay hideMonth />
+      </>
+    ) : (
+      ''
+    )}
+  </div>
+);