diff options
Diffstat (limited to 'src/components/molecules/nav/nav-list.tsx')
| -rw-r--r-- | src/components/molecules/nav/nav-list.tsx | 76 |
1 files changed, 0 insertions, 76 deletions
diff --git a/src/components/molecules/nav/nav-list.tsx b/src/components/molecules/nav/nav-list.tsx deleted file mode 100644 index a6acdcf..0000000 --- a/src/components/molecules/nav/nav-list.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import type { FC, ReactNode } from 'react'; -import { Link, List, ListItem, Nav, type NavProps } from '../../atoms'; -import { NavLink } from './nav-link'; -import styles from './nav-list.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 NavListProps = Omit<NavProps, 'children'> & { - /** - * 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. - */ -export const NavList: FC<NavListProps> = ({ - className = '', - items, - kind, - listClassName = '', - ...props -}) => { - const navClass = [styles[`nav--${kind}`], className].join(' '); - - /** - * Get the nav items. - * @returns {JSX.Element[]} An array of nav items. - */ - const getItems = (): JSX.Element[] => - items.map(({ id, href, label, logo }) => ( - <ListItem key={id} className={styles.nav__item}> - {kind === 'main' ? ( - <NavLink href={href} label={label} logo={logo} variant="main" /> - ) : ( - <Link href={href}>{label}</Link> - )} - </ListItem> - )); - - return ( - <Nav {...props} className={navClass}> - <List className={listClassName} hideMarker isInline spacing="2xs"> - {getItems()} - </List> - </Nav> - ); -}; |
