context-dash

import { useElementContextMenu } from "@/src/components/base/context-menu";
import { notify } from "@/src/components/base/notify/store";

export const Dashboard = () => {
  const menuRef = useElementContextMenu<
    HTMLButtonElement,
    {
      id: number;
      name: string;
    }
  >({
    mode: "replace",

    payload: {
      id: 101,
      name: "Dashboard Button",
    },

    items: (payload) => [
      {
        id: "edit",

        label: `Edit ${payload?.name}`,

        onClick: () => {
          console.log("EDIT", payload);
        },
      },

      {
        id: "delete",

        label: `Delete ${payload?.id}`,

        onClick: () => {
          console.log("DELETE", payload);
        },
      },
    ],
  });

  return (
    <>
      <button
        onClick={() => {
          notify({
            title: "Success",
            description: "Profile updated",
            variant: "success",
          });
        }}
      >
        Save
      </button>

      <button
        className="bg-red-950 p-5 rounded-md text-white"
        ref={menuRef}
      >
        Right Click Me
      </button>
    </>
  );
};