Function GraphCard

src/templates/SavedGraphsTemplate.tsx:33–107

({ userID, graph })

}

const GraphCard: FC<GraphCardProps> = ({ userID, graph }) => {
  const navigate = useNavigate();
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [graphName, setGraphName] = useState<string>(graph.name);
  const [editMode, setEditMode] = useState<boolean>(false);

  const onChangeGraphName = async () => {
    graph.name = graphName;
    await updatePersonalGraph(userID, graph);
    setEditMode(false);
  };

  // Hotkeys for the graph name input
  // Enter: Save the graph name
  const hotKeysMap: HotKeysType = {
    ENTER: {
      key: "enter",
      asyncHandler: async (event: KeyboardEvent<HTMLElement>) => {
        event.preventDefault();

        await onChangeGraphName();
      },
    },
  };

  return (
    <div className="group flex h-full min-h-[7rem] w-full flex-col gap-2 rounded-md px-4 py-3 text-lg text-gray-800 shadow-sm ring-1 ring-inset ring-gray-300">
      <p className=" flex h-fit flex-row flex-wrap items-center gap-1.5 text-base font-semibold text-gray-800 transition-all duration-150 ">
        {editMode ? (
          <div className="flex w-full flex-row items-center gap-1.5 group-hover:flex">
            <input
              type="text"
              value={graphName}
              onChange={(e) => setGraphName(e.target.value)}
              autoFocus
              className="block w-full rounded-md border-0 py-1.5 text-sm leading-6 text-gray-900 ring-1 ring-inset ring-gray-300 transition-all placeholder:text-gray-400 focus:outline focus:outline-[3px] focus:outline-blue-200 focus:ring-2 focus:ring-blue-400"
              onKeyDown={async (event) => {
                const hotKey = event.key.toLocaleLowerCase();
                switch (hotKey) {
                  case hotKeysMap.ENTER.key:
                    await hotKeysMap.ENTER.asyncHandler!(event);
                    break;
                }
              }}
              onBlur={onChangeGraphName}
            />
          </div>
        ) : (
          <span onClick={() => setEditMode(true)}>{graph.name}</span>
        )}
        <Badge text="Ethereum" color={Colors.BLUE} Icon={LinkIcon} />
      </p>

      <div className="h-[1.5px] w-full bg-gray-100" />
      <p className="text-sm text-gray-600">
        {graph.data.addresses.length} addresses
      </p>
      <div className="ml-auto mt-auto flex flex-row">