This repository has been archived on 2025-03-19. You can view files and clone it, but cannot push or open issues or pull requests.
feishin/src/renderer/features/settings/components/settings-header.tsx
2023-03-31 06:15:04 -07:00

48 lines
1.4 KiB
TypeScript

import { Flex, Group } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { RiSettings2Fill } from 'react-icons/ri';
import { Button, ConfirmModal, PageHeader } from '/@/renderer/components';
import { LibraryHeaderBar } from '/@/renderer/features/shared';
import packageJson from '../../../../../package.json';
import { useSettingsStoreActions } from '../../../store/settings.store';
export const SettingsHeader = () => {
const { reset } = useSettingsStoreActions();
const handleResetToDefault = () => {
reset();
closeAllModals();
};
const openResetConfirmModal = () => {
openModal({
children: <ConfirmModal onConfirm={handleResetToDefault}>Are you sure?</ConfirmModal>,
title: 'Reset settings to default',
});
};
return (
<PageHeader>
<LibraryHeaderBar>
<Flex
align="center"
justify="space-between"
w="100%"
>
<Group noWrap>
<RiSettings2Fill size="2rem" />
<LibraryHeaderBar.Title>Settings</LibraryHeaderBar.Title>
<LibraryHeaderBar.Badge>v{packageJson.version}</LibraryHeaderBar.Badge>
</Group>
<Button
compact
variant="default"
onClick={openResetConfirmModal}
>
Reset to default
</Button>
</Flex>
</LibraryHeaderBar>
</PageHeader>
);
};