Create NavItem component (#5972)

feat: create NavItem component

Author: fa-901

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 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 from './index';
+
+type Story = StoryObj<typeof NavItem>;
+type Meta = MetaObj<typeof NavItem>;
+
+export const Default: Story = {
+  args: {
+    href: '/learn',
+    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: 'footer',
+  },
+};
+
+export default { component: NavItem } as Meta;

components/sections/NavItem/index.tsx

@@ -0,0 +1,35 @@
+import { ArrowUpRightIcon } from '@heroicons/react/24/solid';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import { useMemo } from 'react';
+
+import LocalizedLink from '@/components/LocalizedLink';
+
+import styles from './index.module.css';
+
+type NavItemType = 'nav' | 'footer';
+
+type NavItemProps = {
+  href: string;
+  label?: string;
+  type?: NavItemType;
+};
+
+const NavItem: FC<NavItemProps> = ({ href, label, type = 'nav' }) => {
+  const showIcon = useMemo(
+    () => type === 'nav' && /^https?:\/\//.test(href),
+    [href, type]
+  );
+
+  return (
+    <LocalizedLink
+      href={href}
+      className={classNames(styles.navItem, styles[type])}
+    >
+      <span className={styles.label}>{label}</span>
+      {showIcon && <ArrowUpRightIcon className={styles.icon} />}
+    </LocalizedLink>
+  );
+};
+
+export default NavItem;