Spaces:
Runtime error
Runtime error
File size: 3,562 Bytes
a28cd69 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
import { FC, useContext, useEffect, useReducer, useRef } from 'react';
import { useTranslation } from 'next-i18next';
import { useCreateReducer } from '@/hooks/useCreateReducer';
import { getSettings, saveSettings } from '@/utils/app/settings';
import { Settings } from '@/types/settings';
import HomeContext from '@/pages/api/home/home.context';
interface Props {
open: boolean;
onClose: () => void;
}
export const SettingDialog: FC<Props> = ({ open, onClose }) => {
const { t } = useTranslation('settings');
const settings: Settings = getSettings();
const { state, dispatch } = useCreateReducer<Settings>({
initialState: settings,
});
const { dispatch: homeDispatch } = useContext(HomeContext);
const modalRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleMouseDown = (e: MouseEvent) => {
if (modalRef.current && !modalRef.current.contains(e.target as Node)) {
window.addEventListener('mouseup', handleMouseUp);
}
};
const handleMouseUp = (e: MouseEvent) => {
window.removeEventListener('mouseup', handleMouseUp);
onClose();
};
window.addEventListener('mousedown', handleMouseDown);
return () => {
window.removeEventListener('mousedown', handleMouseDown);
};
}, [onClose]);
const handleSave = () => {
homeDispatch({ field: 'lightMode', value: state.theme });
saveSettings(state);
};
// Render nothing if the dialog is not open.
if (!open) {
return <></>;
}
// Render the dialog.
return (
<div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
<div className="fixed inset-0 z-10 overflow-hidden">
<div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div
className="hidden sm:inline-block sm:h-screen sm:align-middle"
aria-hidden="true"
/>
<div
ref={modalRef}
className="dark:border-netural-400 inline-block max-h-[400px] transform overflow-y-auto rounded-lg border border-gray-300 bg-white px-4 pt-5 pb-4 text-left align-bottom shadow-xl transition-all dark:bg-[#202123] sm:my-8 sm:max-h-[600px] sm:w-full sm:max-w-lg sm:p-6 sm:align-middle"
role="dialog"
>
<div className="text-lg pb-4 font-bold text-black dark:text-neutral-200">
{t('Settings')}
</div>
<div className="text-sm font-bold mb-2 text-black dark:text-neutral-200">
{t('Theme')}
</div>
<select
className="w-full cursor-pointer bg-transparent p-2 text-neutral-700 dark:text-neutral-200"
value={state.theme}
onChange={(event) =>
dispatch({ field: 'theme', value: event.target.value })
}
>
<option value="dark">{t('Dark mode')}</option>
<option value="light">{t('Light mode')}</option>
</select>
<button
type="button"
className="w-full px-4 py-2 mt-6 border rounded-lg shadow border-neutral-500 text-neutral-900 hover:bg-neutral-100 focus:outline-none dark:border-neutral-800 dark:border-opacity-50 dark:bg-white dark:text-black dark:hover:bg-neutral-300"
onClick={() => {
handleSave();
onClose();
}}
>
{t('Save')}
</button>
</div>
</div>
</div>
</div>
);
};
|