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, 85 insertions, 0 deletions

diff --git a/src/components/molecules/nav/nav.tsx b/src/components/molecules/nav/nav.tsx
new file mode 100644
index 0000000..581f813
--- /dev/null
+++ b/src/components/molecules/nav/nav.tsx
@@ -0,0 +1,85 @@
+import Link from '@components/atoms/links/link';
+import NavLink from '@components/atoms/links/nav-link';
+import { FC, ReactNode } from 'react';
+import styles from './nav.module.scss';
+
+export type NavItem = {
+  /**
+   * The item id.
+   */
+  id: string;
+  /**
+   * The item link.
+   */
+  href: string;
+  /**
+   * The item name.
+   */
+  label: string;
+  /**
+   * The item logo.
+   */
+  logo?: ReactNode;
+};
+
+export type NavProps = {
+  /**
+   * An accessible name.
+   */
+  'aria-label'?: string;
+  /**
+   * Set additional classnames to the navigation wrapper.
+   */
+  className?: string;
+  /**
+   * The navigation items.
+   */
+  items: NavItem[];
+  /**
+   * The navigation kind.
+   */
+  kind: 'main' | 'footer';
+  /**
+   * Set additional classnames to the navigation list.
+   */
+  listClassName?: string;
+};
+
+/**
+ * Nav component
+ *
+ * Render the nav links.
+ */
+const Nav: FC<NavProps> = ({
+  className = '',
+  items,
+  kind,
+  listClassName = '',
+  ...props
+}) => {
+  const kindClass = `nav--${kind}`;
+
+  /**
+   * Get the nav items.
+   * @returns {JSX.Element[]} An array of nav items.
+   */
+  const getItems = (): JSX.Element[] => {
+    return items.map(({ id, href, label, logo }) => (
+      <li key={id} className={styles.nav__item}>
+        {kind === 'main' ? (
+          <NavLink href={href} label={label} logo={logo} />
+        ) : (
+          <Link href={href}>{label}</Link>
+        )}
+      </li>
+    ));
+  };
+
+  return (
+    <nav className={`${styles[kindClass]} ${className}`} {...props}>
+      <ul className={`${styles.nav__list} ${listClassName}`}>{getItems()}</ul>
+    </nav>
+  );
+};
+
+export default Nav;