"use client"; import React, { useState, useEffect, useRef } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { MoreVertical, Edit2, Copy, Shield, Trash2, Mail } from "lucide-react"; // Mock Data const usersData = [ { id: 1, name: "Olivia Rhye", email: "olivia@uixtra.com", role: "Admin", status: "Active" }, { id: 2, name: "Phoenix Baker", email: "phoenix@uixtra.com", role: "Editor", status: "Active" }, { id: 3, name: "Lana Steiner", email: "lana@uixtra.com", role: "Viewer", status: "Invited" }, { id: 4, name: "Demi Wilkinson", email: "demi@uixtra.com", role: "Editor", status: "Inactive" }, { id: 5, name: "Candice Wu", email: "candice@uixtra.com", role: "Viewer", status: "Active" }, ]; export default function ActionMenuTable() { const [activeMenuId, setActiveMenuId] = useState(null); const tableRef = useRef(null); // Close menu when clicking outside useEffect(() => { const handleClickOutside = (event: MouseEvent) => { if (tableRef.current && !tableRef.current.contains(event.target as Node)) { setActiveMenuId(null); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); const toggleMenu = (id: number) => { setActiveMenuId(activeMenuId === id ? null : id); }; const handleAction = (action: string, id: number) => { console.log(`Action: ${action} on user ID: ${id}`); setActiveMenuId(null); // Close menu after action }; return (

{/* Table Wrapper */}

{usersData.map((user, index) => { const isMenuOpen = activeMenuId === user.id; // If it's the last row, open the menu upwards so it doesn't get cut off const isLastRow = index === usersData.length - 1; return ( ); })}

Name	Role	Status	Actions
{user.name} {user.email}	{user.role}	{user.status}	{/* Action Button /} {/ Dropdown Menu */} {isMenuOpen && ( )}

); }