meta: fixed navitems

components/Sections/Footer/index.module.css

@@ -0,0 +1,49 @@
+.footer {
+  @apply flex
+    flex-col
+    items-center
+    gap-6
+    px-8
+    py-4
+    md:flex-row
+    md:justify-between
+    md:py-5;
+
+  .sectionPrimary {
+    @apply flex
+      flex-wrap
+      content-start
+      items-center
+      justify-center
+      gap-1
+      self-stretch;
+
+    a {
+      @apply whitespace-nowrap;
+    }
+  }
+
+  .sectionSecondary {
+    @apply flex
+      flex-col
+      items-center
+      gap-1
+      md:flex-row;
+
+    .social {
+      @apply flex
+        items-center
+        gap-1;
+    }
+  }
+
+  .darkImage {
+    @apply hidden
+      dark:block;
+  }
+
+  .lightImage {
+    @apply block
+      dark:hidden;
+  }
+}

components/Sections/Footer/index.stories.tsx

@@ -0,0 +1,10 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import Footer from './index';
+
+type Story = StoryObj<typeof Footer>;
+type Meta = MetaObj<typeof Footer>;
+
+export const Default: Story = {};
+
+export default { component: Footer } as Meta;

components/Sections/Footer/index.tsx

@@ -0,0 +1,58 @@
+import classNames from 'classnames';
+import Image from 'next/image';
+import type { FC } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import NavItem from '@/components/Sections/NavItem';
+import { useSiteConfig } from '@/hooks/useSiteConfig';
+
+import styles from './index.module.css';
+
+const Footer: FC = () => {
+  const { footerLinks, socialLinks } = useSiteConfig();
+
+  const openJSlink = footerLinks.at(-1)!;
+
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.sectionPrimary}>
+        {footerLinks.slice(0, -1).map(item => (
+          <NavItem type="footer" href={item.link} key={item.link}>
+            <FormattedMessage id={item.text} />
+          </NavItem>
+        ))}
+      </div>
+      <div className={styles.sectionSecondary}>
+        <NavItem type="footer" href={openJSlink.link}>
+          &copy; <FormattedMessage id={openJSlink.text} />
+        </NavItem>
+        <div className={styles.social}>
+          {socialLinks.map(link => {
+            const navClass = classNames({
+              [styles.darkImage]: link.kind === 'dark',
+              [styles.lightImage]: link.kind === 'light',
+            });
+
+            return (
+              <NavItem
+                className={navClass}
+                key={link.icon}
+                href={link.link}
+                type="footer"
+              >
+                <Image
+                  src={link.icon}
+                  alt={link.alt || 'social'}
+                  width={20}
+                  height={20}
+                />
+              </NavItem>
+            );
+          })}
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

components/Sections/NavItem/index.module.css

@@ -0,0 +1,52 @@
+.navItem {
+  @apply inline-flex
+    items-center
+    gap-2
+    rounded
+    px-3
+    py-2;
+
+  .label {
+    @apply text-sm
+      font-medium
+      leading-5;
+  }
+
+  .icon {
+    @apply h-3
+      w-3
+      text-neutral-500
+      dark:text-neutral-200;
+  }
+
+  &.nav {
+    .label {
+      @apply text-neutral-900
+        dark:text-white;
+    }
+
+    &.active {
+      @apply bg-green-600;
+
+      .label {
+        @apply text-white;
+      }
+
+      .icon {
+        @apply text-white
+          opacity-50;
+      }
+    }
+  }
+
+  &.footer {
+    .label {
+      @apply text-neutral-800
+        dark:text-white;
+    }
+
+    &:hover {
+      @apply bg-neutral-100 dark:bg-neutral-900;
+    }
+  }
+}

components/Sections/NavItem/index.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import NavItem from './index';
+
+type Story = StoryObj<typeof NavItem>;
+type Meta = MetaObj<typeof NavItem>;
+
+export const Default: Story = {
+  args: {
+    href: '/learn',
+    children: 'Learn',
+  },
+};
+
+export const WithExternalLink: Story = {
+  args: {
+    href: 'https://nodejs.org/en',
+    children: 'Learn',
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    href: 'https://nodejs.org/en',
+    children: <b>Learn</b>,
+  },
+};
+
+export const FooterItem: Story = {
+  args: {
+    href: '/about',
+    children: 'Trademark Policy',
+    type: 'footer',
+  },
+};
+
+export default { component: NavItem } as Meta;

components/Sections/NavItem/index.tsx

@@ -0,0 +1,41 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
+import type { FC, PropsWithChildren } from 'react';
+import { useMemo } from 'react';
+
+import ActiveLocalizedLink from '@/components/Common/ActiveLocalizedLink';
+
+import styles from './index.module.css';
+
+type NavItemType = 'nav' | 'footer';
+
+type NavItemProps = {
+  href: string;
+  type?: NavItemType;
+  className?: string;
+};
+
+const NavItem: FC<PropsWithChildren<NavItemProps>> = ({
+  href = '',
+  type = 'nav',
+  children,
+  className,
+}) => {
+  const showIcon = useMemo(
+    () => type === 'nav' && !href.toString().startsWith('/'),
+    [href, type]
+  );
+
+  return (
+    <ActiveLocalizedLink
+      href={href}
+      className={classNames(styles.navItem, styles[type], className)}
+      activeClassName={styles.active}
+    >
+      <span className={styles.label}>{children}</span>
+      {showIcon && <ArrowUpRightIcon className={styles.icon} />}
+    </ActiveLocalizedLink>
+  );
+};
+
+export default NavItem;