48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { Menu, useMantineColorScheme } from "@mantine/core";
|
|
import { IconCode, IconMoon, IconRefresh, IconSun } from "@tabler/icons-react";
|
|
import { ReactNode } from "react";
|
|
export interface ISettingsProps {
|
|
children: ReactNode;
|
|
funtions?: {
|
|
refresh?: () => void;
|
|
};
|
|
}
|
|
|
|
export default function Settings({ children, funtions }: ISettingsProps) {
|
|
const openDevtools = () => {
|
|
window.ipcRenderer?.openDevTools();
|
|
};
|
|
|
|
const {toggleColorScheme, colorScheme}= useMantineColorScheme()
|
|
return (
|
|
<Menu shadow="md" width={200}>
|
|
<Menu.Target>{children}</Menu.Target>
|
|
|
|
<Menu.Dropdown className="text-xs">
|
|
<Menu.Label className="text-xs">Application</Menu.Label>
|
|
<Menu.Item
|
|
onClick={openDevtools}
|
|
leftSection={<IconCode size={12} />}
|
|
className="text-xs"
|
|
>
|
|
Devtool
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
onClick={funtions?.refresh}
|
|
leftSection={<IconRefresh size={12} />}
|
|
className="text-xs"
|
|
>
|
|
Refresh
|
|
</Menu.Item>
|
|
<Menu.Item
|
|
onClick={toggleColorScheme}
|
|
leftSection={colorScheme === 'dark'?<IconSun size={12} />: <IconMoon size={12}/>}
|
|
className="text-xs flex items-center capitalize"
|
|
>
|
|
{colorScheme === 'dark' ? 'Light' : 'Dark'}
|
|
</Menu.Item>
|
|
</Menu.Dropdown>
|
|
</Menu>
|
|
);
|
|
}
|