"use client";
import { useEffect, useId, useRef, useState } from "react";
import { goalsDict } from "@/features/goals/dict";
type GoalCardMenuProps = {
onEdit: () => void;
onDelete: () => void;
};
function KebabIcon() {
return (
);
}
export function GoalCardMenu({ onEdit, onDelete }: GoalCardMenuProps) {
const menuId = useId();
const menuRef = useRef(null);
const [open, setOpen] = useState(false);
useEffect(() => {
if (!open) {
return;
}
const handlePointerDown = (event: MouseEvent) => {
if (!menuRef.current?.contains(event.target as Node)) {
setOpen(false);
}
};
const handleEscape = (event: KeyboardEvent) => {
if (event.key === "Escape") {
setOpen(false);
}
};
document.addEventListener("mousedown", handlePointerDown);
document.addEventListener("keydown", handleEscape);
return () => {
document.removeEventListener("mousedown", handlePointerDown);
document.removeEventListener("keydown", handleEscape);
};
}, [open]);
const closeMenu = () => setOpen(false);
return (
{open ? (
) : null}
);
}