From 98044be08600daf6bd7c7e1a4adada319dbcbbaf Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Fri, 20 Oct 2023 15:23:47 +0200 Subject: feat(components): add a Colophon component --- src/components/molecules/colophon/colophon.tsx | 59 ++++++++++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 src/components/molecules/colophon/colophon.tsx (limited to 'src/components/molecules/colophon/colophon.tsx') 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, '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 ( + + + {copyright} + {license} + + {links?.map(({ id, ...link }) => ( + + + + ))} + + ); +}; + +export const Colophon = forwardRef(ColophonWithRef); -- cgit v1.2.3