refactor: use storybook and atomic design (#16)

BREAKING CHANGE: rewrite most of the Typescript types, so the content format (the meta in particular) needs to be updated.

1 files changed, 59 insertions, 0 deletions

diff --git a/src/components/atoms/layout/copyright.tsx b/src/components/atoms/layout/copyright.tsx
new file mode 100644
index 0000000..f70695d
--- /dev/null
+++ b/src/components/atoms/layout/copyright.tsx
@@ -0,0 +1,59 @@
+import { FC, ReactNode } 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: 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 default Copyright;