Adding NavItem

components/sections/NavItem/index.module.css

@@ -0,0 +1,39 @@
+.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 dark:bg-neutral-900;
+    }
+  }
+}

components/sections/NavItem/index.stories.tsx

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

components/sections/NavItem/index.tsx

@@ -0,0 +1,31 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
+import Link from 'next/link';
+import { useMemo, type FC } from 'react';
+
+import styles from './index.module.css';
+
+export enum NavItemType {
+  nav = 'nav',
+  footer = 'footer',
+}
+
+type NavItemProps = {
+  href: string;
+  label?: string;
+  type?: NavItemType;
+};
+
+const NavItem: FC<NavItemProps> = ({ href, label, type = NavItemType.nav }) => {
+  const showIcon = useMemo(() => {
+    return href.startsWith('http') && type === NavItemType.nav;
+  }, [href, type]);
+
+  return (
+    <Link href={href} className={classNames(styles.navItem, styles[type])}>
+      <span className={styles.label}>{label}</span>
+      {showIcon && <ArrowUpRightIcon className={styles.icon} />}
+    </Link>
+  );
+};
+export default NavItem;