NavItem

import { NavItem } from "@styple/design-system";

<Flex
  css={{
    flexDirection: "column",
    gap: "$md",
    alignItems: "center",
  }}
>
  <Flex
    css={{
      gap: "$md",
      justifyContent: "center",
    }}
  >
    <NavLinkItem ghost href="/docs/components/navitem">Here (color, default)</NavLinkItem>
    <NavLinkItem ghost href="/docs/components/button">Button</NavLinkItem>
    <NavLinkItem ghost href="https://www.bitetap.com/">Ext. Link</NavLinkItem>
  </Flex>
  <Flex
    css={{
      gap: "$md",
      justifyContent: "center",
    }}
  >
    <NavLinkItem active="bold" ghost href="/docs/components/navitem">Here (bold)</NavLinkItem>
    <NavLinkItem active="bold" ghost href="/docs/components/button">Button</NavLinkItem>
    <NavLinkItem active="bold" ghost href="https://www.bitetap.com/">Ext. Link</NavLinkItem>
  </Flex>
  <Flex
    css={{
      gap: "$md",
      justifyContent: "center",
    }}
  >
    <NavLinkItem active="both" ghost href="/docs/components/navitem">Here (both)</NavLinkItem>
    <NavLinkItem active="both" ghost href="/docs/components/button">Button</NavLinkItem>
    <NavLinkItem active="both" ghost href="https://www.bitetap.com/">Ext. Link</NavLinkItem>
  </Flex>
</Flex>

import { useRouter } from "next/router";
import NextLink from "next/link";
import { NavItem } from "../packages/design-system";
import React from "react";
import { UrlObject } from "url";

type NavItemProps = React.ComponentProps<typeof NavItem>;
type NavLinkItemProps = Omit<NavItemProps, "href"> & {
  href: string | UrlObject;
  children: React.ReactNode;
};

export const NavLinkItem = React.forwardRef<
  React.ElementRef<typeof NavItem>,
  NavLinkItemProps
>(({ href, children, ...props }, forwardedRef) => {
  const { asPath } = useRouter();
  const isActive = asPath.split("#")[0] === href;

  return (
    <NextLink href={href} passHref>
      <NavItem
        className={isActive ? "active" : ""}
        ref={forwardedRef}
        {...props}
      >
        {children}
      </NavItem>
    </NextLink>
  );
});
NavLinkItem.displayName = "NavLinkItem";