gitfor/platform

import { forwardRef } from "react";
import { createLink, type LinkComponent } from "@tanstack/react-router";
import { Tabs } from "@cloudflare/kumo/components/tabs";
import { cn } from "~/utils/cn";

type AnchorProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;

const SideNavAnchor = forwardRef<HTMLAnchorElement, AnchorProps>(function SideNavAnchor(
  { className, children, ...rest },
  ref,
) {
  return (
    <a
      ref={ref}
      className={cn(
        "rounded-md px-3 py-1.5 text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-strong [&.active]:bg-kumo-tint [&.active]:text-kumo-strong",
        className,
      )}
      {...rest}
    >
      {children}
    </a>
  );
});
SideNavAnchor.displayName = "SideNavAnchor";

const RouterSideNavLink = createLink(SideNavAnchor);

/** Vertical settings-style navigation item. */
export const SideNavLink: LinkComponent<typeof SideNavAnchor> = (props) => <RouterSideNavLink {...props} />;

export function SideNav({
  title,
  className,
  children,
}: {
  title?: React.ReactNode;
  className?: string;
  children: React.ReactNode;
}) {