55 lines
1.8 KiB
React
55 lines
1.8 KiB
React
// This component displays a drop down menu when clicked, with custom functionality
|
|
// for 'Add Widget', 'Edit Widgets', and 'Remove Widgets'. This component will
|
|
// control settings related to the Widgets on the main canvas.
|
|
|
|
import { Button, IconButton, Menu, Portal } from "@chakra-ui/react";
|
|
import { FiSettings } from "react-icons/fi";
|
|
|
|
export function SettingsButton(props) {
|
|
const handleAddWidget = () => {
|
|
console.log("Add Widget clicked");
|
|
// TODO: Implement widget-adding logic
|
|
}
|
|
|
|
const handleEditWidgdets = () => {
|
|
console.log("Edit Widgets clicked")
|
|
// TODO: Implement widget-editing logic
|
|
}
|
|
|
|
const handleDeleteWidgets = () => {
|
|
console.log("Delete Widgets clicked");
|
|
// TODO: Implement widget-deletion logic
|
|
}
|
|
|
|
return (
|
|
// This uses Chakra's built in menu component
|
|
<Menu.Root>
|
|
<Menu.Trigger asChild>
|
|
<IconButton variant="ghost" size="md">
|
|
<FiSettings />
|
|
</IconButton>
|
|
</Menu.Trigger>
|
|
<Portal>
|
|
<Menu.Positioner>
|
|
<Menu.Content>
|
|
<Menu.Item onClick={handleAddWidget} value="addwidget">Add Widget</Menu.Item>
|
|
<Menu.Item onClick={handleEditWidgdets} value ="editwidget">Edit Widgets</Menu.Item>
|
|
<Menu.Item
|
|
onClick={handleDeleteWidgets}
|
|
color="fg.error"
|
|
_hover={{ bg: "bg.error", color: "fg.error "}}
|
|
>
|
|
Delete Widgets
|
|
</Menu.Item>
|
|
</Menu.Content>
|
|
</Menu.Positioner>
|
|
</Portal>
|
|
</Menu.Root>
|
|
);
|
|
}
|
|
|
|
|
|
|
|
|
|
|