feat(components): add a Colophon component

1 files changed, 59 insertions, 0 deletions

diff --git a/src/components/molecules/colophon/colophon.tsx b/src/components/molecules/colophon/colophon.tsx
new file mode 100644
index 0000000..9676eb2
--- /dev/null
+++ b/src/components/molecules/colophon/colophon.tsx
@@ -0,0 +1,59 @@
+import {
+  type ForwardRefRenderFunction,
+  forwardRef,
+  type ReactNode,
+} from 'react';
+import { List, ListItem, type ListProps } from '../../atoms';
+import { NavLink } from '../nav';
+import styles from './colophon.module.scss';
+
+export type ColophonLink = {
+  id: string;
+  href: string;
+  label: ReactNode;
+};
+
+export type ColophonProps = Omit<ListProps<false, false>, 'children'> & {
+  /**
+   * The website copyright.
+   */
+  copyright: ReactNode;
+  /**
+   * The website license.
+   */
+  license?: ReactNode;
+  /**
+   * The colophon links (ie. legal notice)
+   */
+  links?: ColophonLink[];
+};
+
+const ColophonWithRef: ForwardRefRenderFunction<
+  HTMLUListElement,
+  ColophonProps
+> = ({ className = '', copyright, license, links, ...props }, ref) => {
+  const colophonClass = `${styles.list} ${className}`;
+
+  return (
+    <List
+      {...props}
+      className={colophonClass}
+      isInline
+      ref={ref}
+      // eslint-disable-next-line react/jsx-no-literals -- Spacing allowed
+      spacing="2xs"
+    >
+      <ListItem className={styles.legal} hideMarker>
+        {copyright}
+        {license}
+      </ListItem>
+      {links?.map(({ id, ...link }) => (
+        <ListItem key={id}>
+          <NavLink {...link} />
+        </ListItem>
+      ))}
+    </List>
+  );
+};
+
+export const Colophon = forwardRef(ColophonWithRef);