From 8f5632c5ad0bc8a4b3028c2806365717fedd78c9 Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Fri, 18 Mar 2022 10:20:39 +0100 Subject: [PATCH] feat(client/theme): add theme switcher to landing page --- client/components/shared/LanguageSwitcher.tsx | 57 +++++++------------ client/constants/index.ts | 2 + client/pages/index.tsx | 18 ++++-- client/public/locales/en/common.json | 3 - client/styles/pages/Home.module.scss | 6 +- 5 files changed, 39 insertions(+), 47 deletions(-) diff --git a/client/components/shared/LanguageSwitcher.tsx b/client/components/shared/LanguageSwitcher.tsx index 252962fe..f8eef27c 100644 --- a/client/components/shared/LanguageSwitcher.tsx +++ b/client/components/shared/LanguageSwitcher.tsx @@ -1,70 +1,51 @@ import { Language } from '@mui/icons-material'; -import { IconButton, Popover } from '@mui/material'; +import { IconButton, Menu, MenuItem } from '@mui/material'; import { useRouter } from 'next/router'; -import { useTranslation } from 'next-i18next'; import { MouseEvent, useState } from 'react'; import { languages } from '@/config/languages'; -import { useAppDispatch } from '@/store/hooks'; -import { setResumeState } from '@/store/resume/resumeSlice'; - -import styles from './LanguageSwitcher.module.scss'; +import { TRANSLATE_URL } from '@/constants/index'; const LanguageSwitcher = () => { const router = useRouter(); - const { t } = useTranslation(); - - const dispatch = useAppDispatch(); - const [anchorEl, setAnchorEl] = useState(null); const handleClick = (event: MouseEvent) => setAnchorEl(event.currentTarget); const handleClose = () => setAnchorEl(null); - const handleChangeLanguage = (locale: string) => { + const handleChange = (locale: string) => { const { pathname, asPath, query } = router; + handleClose(); + document.cookie = `NEXT_LOCALE=${locale}; path=/; expires=2147483647`; - dispatch(setResumeState({ path: 'metadata.locale', value: locale })); router.push({ pathname, query }, asPath, { locale }); }; + const handleAddLanguage = () => window.open(TRANSLATE_URL, '_blank'); + return (
- -
-
- {languages.map(({ code, name, localName }) => ( -

handleChangeLanguage(code)}> - {name} {localName && `(${localName})`} -

- ))} + + {languages.map(({ code, name, localName }) => ( + handleChange(code)}> + {name} {localName && `(${localName})`} + + ))} - - {t('common.footer.language.missing')} - -
-
- + + + Add your language + + +
); }; diff --git a/client/constants/index.ts b/client/constants/index.ts index 921aacea..54f24216 100644 --- a/client/constants/index.ts +++ b/client/constants/index.ts @@ -10,6 +10,8 @@ export const FILENAME_TIMESTAMP = 'DDMMYYYYHHmmss'; // Links export const DONATION_URL = 'https://paypal.me/RajaRajanA'; +export const TRANSLATE_URL = 'https://translate.rxresu.me/'; +export const DIGITALOCEAN_URL = 'https://pillai.xyz/digitalocean'; export const GITHUB_URL = 'https://github.com/AmruthPillai/Reactive-Resume'; export const PRODUCT_HUNT_URL = 'https://www.producthunt.com/posts/reactive-resume-v3'; export const GITHUB_ISSUES_URL = 'https://github.com/AmruthPillai/Reactive-Resume/issues/new/choose'; diff --git a/client/pages/index.tsx b/client/pages/index.tsx index 45747181..0b578209 100644 --- a/client/pages/index.tsx +++ b/client/pages/index.tsx @@ -1,6 +1,6 @@ -import { Link as LinkIcon } from '@mui/icons-material'; +import { DarkMode, LightMode, Link as LinkIcon } from '@mui/icons-material'; import { Masonry } from '@mui/lab'; -import { Button } from '@mui/material'; +import { Button, IconButton } from '@mui/material'; import type { GetStaticProps, NextPage } from 'next'; import Image from 'next/image'; import Link from 'next/link'; @@ -15,11 +15,12 @@ import NoSSR from '@/components/shared/NoSSR'; import { screenshots } from '@/config/screenshots'; import testimonials from '@/data/testimonials'; import { logout } from '@/store/auth/authSlice'; +import { setTheme } from '@/store/build/buildSlice'; import { useAppDispatch, useAppSelector } from '@/store/hooks'; import { setModalState } from '@/store/modal/modalSlice'; import styles from '@/styles/pages/Home.module.scss'; -import { DONATION_URL, GITHUB_URL } from '../constants'; +import { DIGITALOCEAN_URL, DONATION_URL, GITHUB_URL } from '../constants'; export const getStaticProps: GetStaticProps = async ({ locale = 'en' }) => { return { @@ -34,12 +35,15 @@ const Home: NextPage = () => { const dispatch = useAppDispatch(); + const theme = useAppSelector((state) => state.build.theme); const isLoggedIn = useAppSelector((state) => state.auth.isLoggedIn); const handleLogin = () => dispatch(setModalState({ modal: 'auth.login', state: { open: true } })); const handleRegister = () => dispatch(setModalState({ modal: 'auth.register', state: { open: true } })); + const handleToggle = () => dispatch(setTheme({ theme: theme === 'light' ? 'dark' : 'light' })); + const handleLogout = () => dispatch(logout()); return ( @@ -175,7 +179,7 @@ const Home: NextPage = () => {
- + Powered By DigitalOcean
@@ -187,7 +191,11 @@ const Home: NextPage = () => {
v{process.env.appVersion}
- +
+ {theme === 'dark' ? : } + + +
); diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index 033862e2..801242d7 100644 --- a/client/public/locales/en/common.json +++ b/client/public/locales/en/common.json @@ -7,9 +7,6 @@ }, "footer": { "credit": "A passion project by <1>Amruth Pillai", - "language": { - "missing": "Missing your language?" - }, "license": "By the community, for the community." }, "markdown": { diff --git a/client/styles/pages/Home.module.scss b/client/styles/pages/Home.module.scss index 45c6a6d8..50be2714 100644 --- a/client/styles/pages/Home.module.scss +++ b/client/styles/pages/Home.module.scss @@ -2,7 +2,11 @@ @apply m-6 grid gap-8 text-center md:m-8 md:text-left; footer { - @apply flex items-end justify-between; + @apply flex flex-col gap-8 items-center sm:items-end justify-between sm:flex-row sm:gap-0; + + .actions { + @apply flex gap-2; + } .version > div { @apply text-xs font-medium opacity-50 mt-3;