From a7adae1a2376082841053c91508b1c23dc951b74 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 11 Apr 2022 18:50:20 +0200
Subject: chore: add a Copyright component

---
 src/components/atoms/layout/copyright.tsx | 59 +++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 src/components/atoms/layout/copyright.tsx

(limited to 'src/components/atoms/layout/copyright.tsx')

diff --git a/src/components/atoms/layout/copyright.tsx b/src/components/atoms/layout/copyright.tsx
new file mode 100644
index 0000000..76252ee
--- /dev/null
+++ b/src/components/atoms/layout/copyright.tsx
@@ -0,0 +1,59 @@
+import { ReactNode, VFC } from 'react';
+import styles from './copyright.module.scss';
+
+export type CopyrightDates = {
+  /**
+   * The copyright start year.
+   */
+  start: string;
+  /**
+   * The copyright end year.
+   */
+  end?: string;
+};
+
+export type CopyrightProps = {
+  /**
+   * The copyright owner.
+   */
+  owner: string;
+  /**
+   * The copyright dates.
+   */
+  dates: CopyrightDates;
+  /**
+   * The copyright icon.
+   */
+  icon: ReactNode;
+};
+
+/**
+ * Copyright component
+ *
+ * Renders a copyright information (owner, dates, license icon).
+ */
+const Copyright: VFC<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 default Copyright;
-- 
cgit v1.2.3