64 lines
1.5 KiB
TypeScript
64 lines
1.5 KiB
TypeScript
import {
|
|
IconButton,
|
|
Menu,
|
|
MenuButton,
|
|
MenuList,
|
|
MenuItem,
|
|
useColorMode,
|
|
} from "@chakra-ui/react";
|
|
import {
|
|
IconMenu2,
|
|
IconMoon,
|
|
IconSettings,
|
|
IconSun,
|
|
} from "@tabler/icons-react";
|
|
import { useState } from "react";
|
|
import WorkspaceSettingsModal from "./WorkspaceSettingsModal";
|
|
const ICON_SIZE = 16;
|
|
type Props = {
|
|
// onclose: () => void;
|
|
};
|
|
export default function RecentFilesDrawerMenu({}: Props) {
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
|
const { colorMode, toggleColorMode } = useColorMode();
|
|
|
|
return (
|
|
<>
|
|
<Menu isLazy>
|
|
<MenuButton
|
|
as={IconButton}
|
|
aria-label="Options"
|
|
icon={<IconMenu2 />}
|
|
size={"sm"}
|
|
variant="outline"
|
|
/>
|
|
<MenuList>
|
|
<MenuItem
|
|
onClick={() => setIsSettingsOpen(true)}
|
|
icon={<IconSettings size={16} />}
|
|
fontSize={16}
|
|
>
|
|
Settings
|
|
</MenuItem>
|
|
<MenuItem
|
|
onClick={toggleColorMode}
|
|
icon={
|
|
colorMode === "light" ? (
|
|
<IconMoon size={ICON_SIZE} />
|
|
) : (
|
|
<IconSun size={ICON_SIZE} />
|
|
)
|
|
}
|
|
fontSize={16}
|
|
>
|
|
{colorMode === "light" ? "Dark" : "Light"} Mode
|
|
</MenuItem>
|
|
</MenuList>
|
|
</Menu>
|
|
{isSettingsOpen && (
|
|
<WorkspaceSettingsModal onClose={() => setIsSettingsOpen(false)} />
|
|
)}
|
|
</>
|
|
);
|
|
}
|