Function SavedGraphs

src/components/navbar/Navbar.tsx:117–169

({ userID })

}

const SavedGraphs: FC<SavedGraphsProps> = ({ userID }) => {
  const [isCreateGraphDialogOpen, setIsCreateGraphDialogOpen] = useState(false);

  const { graphs } = usePersonalGraphs(userID ? userID : "");
  const { displayedGraphs } = useMemo(() => {
    return {
      displayedGraphs: graphs.slice(0, SAVED_GRAPHS_LIMIT),
    };
  }, [graphs]);

  return (
    <>
      <div className="flex flex-col gap-x-2.5 pl-[0.8rem]">
        {displayedGraphs.map((graph, index) => (
          <Transition
            key={graph.uid}
            show={true}
            appear={true}
            enter="transition-all duration-300"
            enterFrom="opacity-0 -translate-y-5"
            enterTo="opacity-100 translate-y-0"
            style={{
              transitionDelay: `${index * 50}ms`,
            }}
          >
            <SavedGraphRow
              name={graph.name}
              href={getGraphHref(graph)}
              isLast={index === displayedGraphs.length - 1}
            />
          </Transition>
        ))}
        <button
          key="New Graph"
          onClick={() => setIsCreateGraphDialogOpen(true)}
          className="group -mb-10 flex h-10 cursor-pointer flex-row items-center gap-x-4 text-xs font-semibold text-gray-500 transition-all  duration-150 hover:gap-x-[1.1rem] hover:text-gray-700"
        >
          <div className="mb-1 h-1/2 w-[1.5px] -translate-y-1/2 bg-gray-300" />
          <PlusCircleIcon
            className="absolute h-5 w-5 -translate-x-[0.6rem] rounded-full bg-white p-[0.06rem] text-gray-400 ring-[1.5px] ring-gray-300 transition-all duration-150 group-hover:text-gray-500"
            aria-hidden="true"
          />
          New Graph
        </button>
      </div>
      <CreateGraphDialog
        isOpen={isCreateGraphDialogOpen}
        setOpen={setIsCreateGraphDialogOpen}
        graphInfo={NEW_GRAPH_INFO}
      />
    </>
  );
};

const SavedGraphRow: FC<SavedGraphRowProps> = ({ name, href }) => {
  const navigate = useNavigate();