feishin/src/renderer/features/settings/components/settings-header.tsx

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 { 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 (
        <Flex>
            <PageHeader>
                <LibraryHeaderBar>
                    <Flex
                        align="center"
                        justify="space-between"
                        w="100%"
                    >
                        <Group noWrap>
                            <RiSettings2Fill size="2rem" />
                            <LibraryHeaderBar.Title>Settings</LibraryHeaderBar.Title>
                        </Group>
                        <Button
                            compact
                            variant="default"
                            onClick={openResetConfirmModal}
                        >
                            Reset to default
                        </Button>
                    </Flex>
                </LibraryHeaderBar>
            </PageHeader>
        </Flex>
    );
};