Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-15 01:01:43 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat(client): add language selector, language detector and privacy/tos pages

Browse Source
This commit is contained in:
Amruth Pillai
2022-03-08 22:57:47 +01:00
parent bf9da32465
commit a131bb3652
32 changed files with 423 additions and 2100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
client/wrappers/LocaleWrapper.tsx
View File

@ -1,4 +1,26 @@
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { useAppSelector } from '@/store/hooks';
const LocaleWrapper: React.FC = ({ children }) => {
const router = useRouter();
const language = useAppSelector((state) => state.build.language);
useEffect(() => {
if (!language) return;
const { code } = language;
const { pathname, asPath, query, locale } = router;
document.cookie = `NEXT_LOCALE=${code}; path=/; expires=2147483647`;
if (locale !== code) {
router.push({ pathname, query }, asPath, { locale: code });
}
}, [router, language]);
return <>{children}</>;
};

12
client/wrappers/ThemeWrapper.tsx
View File

@ -1,24 +1,24 @@
import { ThemeProvider, useMediaQuery } from '@mui/material';
import { ThemeProvider } from '@mui/material';
import { useEffect, useMemo } from 'react';
import { darkTheme, lightTheme } from '@/config/theme';
import { setTheme, Theme } from '@/store/build/buildSlice';
import { setTheme } from '@/store/build/buildSlice';
import { useAppDispatch, useAppSelector } from '@/store/hooks';
const ThemeWrapper: React.FC = ({ children }) => {
const dispatch = useAppDispatch();
const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
const theme: Theme | undefined = useAppSelector((state) => state.build.theme);
const theme = useAppSelector((state) => state.build.theme);
const isDarkMode = useMemo(() => theme === 'dark', [theme]);
const muiTheme = useMemo(() => (isDarkMode ? darkTheme : lightTheme), [isDarkMode]);
useEffect(() => {
if (theme === undefined) {
dispatch(setTheme({ theme: prefersDarkMode ? 'dark' : 'light' }));
dispatch(setTheme({ theme: 'dark' }));
}
}, [theme, dispatch, prefersDarkMode]);
}, [theme, dispatch]);
useEffect(() => {
if (isDarkMode) {