refactor(components): rewrite NavList component

* extract NavItem from NavList
* remove `kind` and `listClassName` props (since the consumer has
control over NavList, NavItem and NavLink components these props are
obsolete)

1 files changed, 16 insertions, 9 deletions

diff --git a/src/components/organisms/layout/site-footer.tsx b/src/components/organisms/layout/site-footer.tsx
index 0866924..b4930d6 100644
--- a/src/components/organisms/layout/site-footer.tsx
+++ b/src/components/organisms/layout/site-footer.tsx
@@ -5,10 +5,17 @@ import {
   BackToTop,
   type BackToTopProps,
   NavList,
-  type NavItem,
+  NavItem,
+  NavLink,
 } from '../../molecules';
 import styles from './site-footer.module.scss';
 
+export type FooterLinks = {
+  id: string;
+  href: string;
+  label: string;
+};
+
 export type SiteFooterProps = {
   /**
    * Set additional classnames to the back to top button.
@@ -25,7 +32,7 @@ export type SiteFooterProps = {
   /**
    * The footer nav items.
    */
-  navItems?: NavItem[];
+  navItems?: FooterLinks[];
   /**
    * An element id (without hashtag) used as anchor for back to top button.
    */
@@ -67,13 +74,13 @@ export const SiteFooter: FC<SiteFooterProps> = ({
         owner={copyright.owner}
       />
       {navItems ? (
-        <NavList
-          aria-label={ariaLabel}
-          className={styles.nav}
-          items={navItems}
-          // eslint-disable-next-line react/jsx-no-literals -- Kind allowed
-          kind="footer"
-        />
+        <NavList aria-label={ariaLabel} className={styles.nav} isInline>
+          {navItems.map(({ id, ...link }) => (
+            <NavItem key={id}>
+              <NavLink {...link} />
+            </NavItem>
+          ))}
+        </NavList>
       ) : null}
       <BackToTop
         anchor={backToTopAnchor}