Archived
75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import {
|
|
Button,
|
|
Checkbox,
|
|
Flex,
|
|
Modal,
|
|
ModalBody,
|
|
ModalCloseButton,
|
|
ModalContent,
|
|
ModalFooter,
|
|
ModalHeader,
|
|
ModalOverlay,
|
|
createDisclosure,
|
|
} from '@hope-ui/solid';
|
|
import { HiOutlineTrash, HiSolidCog } from 'solid-icons/hi';
|
|
import { useSettings } from '~/state/SettingsProvider';
|
|
|
|
type SettingsProps = {
|
|
className?: string;
|
|
};
|
|
|
|
export function Settings(props: SettingsProps) {
|
|
const { appSettings, setAppSettings } = useSettings();
|
|
const { isOpen, onOpen, onClose } = createDisclosure();
|
|
|
|
return (
|
|
<div class={props.className}>
|
|
<HiSolidCog onClick={onOpen} size={24} />
|
|
|
|
<Modal opened={isOpen()} onClose={onClose}>
|
|
<ModalOverlay />
|
|
<ModalContent>
|
|
<ModalCloseButton />
|
|
<ModalHeader>Settings</ModalHeader>
|
|
<ModalBody>
|
|
<Flex direction="column" gap=".5rem">
|
|
<Checkbox
|
|
checked={appSettings.showLocations}
|
|
onChange={(e) =>
|
|
setAppSettings((prev) => ({ ...prev, showLocations: (e.target as any).checked }))
|
|
}
|
|
>
|
|
Show locations
|
|
</Checkbox>
|
|
<Checkbox
|
|
checked={appSettings.useSavedBackgrounds}
|
|
onChange={(e) =>
|
|
setAppSettings((prev) => ({
|
|
...prev,
|
|
useSavedBackgrounds: (e.target as any).checked,
|
|
}))
|
|
}
|
|
>
|
|
Use saved backgrounds
|
|
</Checkbox>
|
|
<a
|
|
style={{ display: 'flex', 'align-items': 'center', gap: '8px', cursor: 'pointer' }}
|
|
onClick={() => {
|
|
localStorage.removeItem('start-page-background');
|
|
window.location.reload();
|
|
}}
|
|
>
|
|
<HiOutlineTrash size={16} />
|
|
Reload background
|
|
</a>
|
|
</Flex>
|
|
</ModalBody>
|
|
<ModalFooter>
|
|
<Button onClick={onClose}>Close</Button>
|
|
</ModalFooter>
|
|
</ModalContent>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
}
|