Function SavedGraphsTemplate

src/templates/SavedGraphsTemplate.tsx:109–150

()

};

const SavedGraphsTemplate: FC = () => {
  const { user } = useAuthState();
  const userID = useMemo(() => user!.uid, [user]);
  const { graphs } = usePersonalGraphs(user ? user.uid : "");
  const [isCreateGraphDialogOpen, setIsCreateGraphDialogOpen] = useState(false);

  return (
    <>
      <SEO
        title="Saved Graphs"
        description="View and manage your saved graphs"
      />
      <div className="mx-14 my-10 flex w-full flex-col gap-y-5">
        <h3 className="flex flex-row justify-between  text-xl font-semibold text-gray-700">
          <div className="flex flex-row items-center gap-2">
            <ShareIcon className="mt-0.5 inline-block h-7 w-7 text-gray-400" />
            Saved Graphs
          </div>
          <BigButton
            text="New graph"
            onClick={() => {
              setIsCreateGraphDialogOpen(true);
            }}
            Icon={PlusCircleIcon}
          />
        </h3>
        <div className="h-[1px] w-full bg-gray-200" />
        <div className="scrollbar overflow-x-hidden overflow-y-scroll">
          <div className="grid auto-rows-auto grid-cols-3 gap-4 pr-3">
            {graphs.map((graph) => (
              <GraphCard graph={graph} key={graph.uid} userID={userID} />
            ))}
          </div>
        </div>
        <CreateGraphDialog
          isOpen={isCreateGraphDialogOpen}
          setOpen={setIsCreateGraphDialogOpen}
        />
      </div>
    </>
  );
};

export default SavedGraphsTemplate;