Function SavedGraphRow

src/components/navbar/Navbar.tsx:171–212

({ name, href })

};

const SavedGraphRow: FC<SavedGraphRowProps> = ({ name, href }) => {
  const navigate = useNavigate();
  const isCurrent = window.location.href.includes(href);

  return (
    <a
      key={name}
      onClick={() => navigate(href)}
      className={clsx(
        isCurrent ? "text-blue-500" : "text-gray-500 hover:text-gray-700",
        "group flex h-10 cursor-pointer flex-row items-center gap-x-3 text-xs font-semibold transition-all duration-150 hover:gap-x-3.5",
      )}
    >
      <div className="relative flex h-full flex-row items-center">
        {/* If it's the last, only display half a bar connecting upwards instead of a full bar. */}
        <div
          className={clsx(
            "h-full w-[1.5px] transition-all duration-150",
            isCurrent
              ? "bg-gradient-to-t from-gray-300 via-blue-400 to-gray-300 "
              : "bg-gradient-to-t from-gray-300 to-gray-300",
          )}
        />
        <div
          className={clsx(
            "transtion-all absolute -left-[0.2rem] h-2 w-2 rounded-full bg-white ring-[1.5px] duration-150",
            isCurrent ? "ring-blue-500" : "ring-gray-300",
          )}
        />
        <div
          className={clsx(
            "absolute -left-[0.2rem] h-2 w-2 rounded-full  ring-inset ring-white transition-all duration-150",
            isCurrent
              ? "bg-blue-400 opacity-100 ring-1"
              : "bg-gray-300 opacity-0 ring-0 group-hover:opacity-100",
          )}
        />
      </div>
      {name}
    </a>
  );
};

interface NavbarProps {
  userID: string;