gitfor/platform

import { forwardRef } from "react";
import { createLink, type LinkComponent } from "@tanstack/react-router";
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-gray-400 hover:bg-gray-900 hover:text-white [&.active]:bg-gray-900 [&.active]:text-white",
        className,
      )}
      {...rest}
    >
      {children}
    </a>
  );
});
SideNavAnchor.displayName = "SideNavAnchor";

const TabAnchor = forwardRef<HTMLAnchorElement, AnchorProps>(function TabAnchor({ className, children, ...rest }, ref) {
  return (
    <a
      ref={ref}
      className={cn(
        "-mb-px flex shrink-0 items-center gap-2 border-b-2 border-transparent px-3 py-2 text-sm whitespace-nowrap text-gray-400 hover:text-white [&.active]:border-accent-500 [&.active]:text-white",
        className,
      )}
      {...rest}
    >
      {children}
    </a>
  );
});
TabAnchor.displayName = "TabAnchor";