File size: 3,373 Bytes
f909d7c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
import React from "react";
import { Menu, Text, Flex, Badge } from "@mantine/core";
import { BsCheck2 } from "react-icons/bs";
import { MdSettings } from "react-icons/md";
import useConfig from "src/store/useConfig";
import * as Styles from "./styles";
export const OptionsMenu = () => {
const toggleGestures = useConfig(state => state.toggleGestures);
const toggleChildrenCount = useConfig(state => state.toggleChildrenCount);
const toggleDarkMode = useConfig(state => state.toggleDarkMode);
const toggleRulers = useConfig(state => state.toggleRulers);
const toggleCollapseButton = useConfig(state => state.toggleCollapseButton);
const toggleImagePreview = useConfig(state => state.toggleImagePreview);
const toggleAI = useConfig(state => state.toggleAI);
const gesturesEnabled = useConfig(state => state.gesturesEnabled);
const childrenCountVisible = useConfig(state => state.childrenCountVisible);
const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
const rulersEnabled = useConfig(state => state.rulersEnabled);
const collapseButtonVisible = useConfig(state => state.collapseButtonVisible);
const imagePreviewEnabled = useConfig(state => state.imagePreviewEnabled);
const aiEnabled = useConfig(state => state.aiEnabled);
return (
<Menu shadow="md" trigger="click" closeOnItemClick={false} withArrow>
<Menu.Target>
<Styles.StyledToolElement>
<Flex gap={4}>
<MdSettings size="18" />
</Flex>
</Styles.StyledToolElement>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item
leftSection={<BsCheck2 opacity={rulersEnabled ? 100 : 0} />}
onClick={() => toggleRulers(!rulersEnabled)}
>
<Text size="xs">Rulers</Text>
</Menu.Item>
<Menu.Item
leftSection={<BsCheck2 opacity={gesturesEnabled ? 100 : 0} />}
onClick={() => toggleGestures(!gesturesEnabled)}
>
<Text size="xs">Trackpad Gestures</Text>
</Menu.Item>
<Menu.Item
leftSection={<BsCheck2 opacity={childrenCountVisible ? 100 : 0} />}
onClick={() => toggleChildrenCount(!childrenCountVisible)}
>
<Text size="xs">Item Count</Text>
</Menu.Item>
<Menu.Item
leftSection={<BsCheck2 opacity={imagePreviewEnabled ? 100 : 0} />}
onClick={() => toggleImagePreview(!imagePreviewEnabled)}
>
<Text size="xs">Image Link Preview</Text>
</Menu.Item>
<Menu.Item
leftSection={<BsCheck2 opacity={collapseButtonVisible ? 100 : 0} />}
onClick={() => toggleCollapseButton(!collapseButtonVisible)}
>
<Text size="xs">Show Expand/Collapse</Text>
</Menu.Item>
<Menu.Item
leftSection={<BsCheck2 opacity={darkmodeEnabled ? 100 : 0} />}
onClick={() => toggleDarkMode(!darkmodeEnabled)}
>
<Text size="xs">Dark Mode</Text>
</Menu.Item>
<Menu.Item
leftSection={<BsCheck2 opacity={aiEnabled ? 100 : 0} />}
onClick={() => toggleAI(!aiEnabled)}
>
<Text size="xs">
JSON Crack AI{" "}
<Badge ml={2} size="xs" variant="light" radius={2}>
Alpha
</Badge>
</Text>
</Menu.Item>
</Menu.Dropdown>
</Menu>
);
};
|