46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import React, { useState } from "react";
|
|
import { KebebIcon } from "../../icons/ExportCommonIcons";
|
|
|
|
interface KebabMenuListProps {
|
|
items: string[]; // Array of menu items
|
|
onSelect?: (item: string) => void; // Callback when a menu item is selected
|
|
}
|
|
|
|
const KebabMenuList: React.FC<KebabMenuListProps> = ({ items, onSelect }) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const handleToggle = () => {
|
|
setIsOpen((prev) => !prev);
|
|
};
|
|
|
|
const handleItemClick = (item: string) => {
|
|
if (onSelect) {
|
|
onSelect(item);
|
|
}
|
|
setIsOpen(false); // Close menu after selection
|
|
};
|
|
|
|
return (
|
|
<div className="kebab-menu-container">
|
|
<div className="kebab-icon" onClick={handleToggle}>
|
|
<KebebIcon />
|
|
</div>
|
|
{isOpen && (
|
|
<div className="menu-list">
|
|
{items.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className="menu-item"
|
|
onClick={() => handleItemClick(item)}
|
|
>
|
|
{item}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default KebabMenuList;
|