client/components/SettingsButton.tsx

import { useState } from "react";
import { SettingsForm } from "./SettingsForm";
import { toast } from "react-hot-toast";

export function SettingsButton() {
  const [isToastOpen, setToastOpen] = useState(false);

  const toastId = "settings-toast";

  const openToast = () => {
    setToastOpen(true);

    toast(
      <div>
        <SettingsForm />
        <div
          style={{
            display: "flex",
            justifyContent: "center",
            marginTop: "8px",
          }}
        >
          <button style={{ fontSize: "small" }} onClick={closeToast}>
            Done
          </button>
        </div>
      </div>,
      {
        id: toastId,
        duration: Infinity,
        position: "bottom-center",
        style: {
          borderRadius: "10px",
          background: "var(--background)",
          color: "var(--text-main)",
        },
      },
    );
  };

  const closeToast = () => {
    setToastOpen(false);
    toast.dismiss(toastId);
  };

  return (
    <button
      style={{ fontSize: "small", marginRight: 0 }}
      onClick={(event) => {
        event.preventDefault();
        isToastOpen ? closeToast() : openToast();
      }}
    >
      Settings
    </button>
  );
}