feat: select language wip

martapanc · Aug 27, 2023 · 590725a · 590725a
1 parent e434da5
commit 590725a
Show file tree

Hide file tree

Showing 7 changed files with 1,076 additions and 81 deletions.
diff --git a/package.json b/package.json
@@ -22,14 +22,16 @@
   },
   "dependencies": {
     "@apollo/client": "^3.8.1",
+    "@chakra-ui/react": "^2.8.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@heroicons/react": "^2.0.18",
     "@mui/material": "^5.13.5",
     "@types/styled-components": "^5.1.0",
     "classnames": "^2.3.2",
     "clsx": "^2.0.0",
     "focus-trap-react": "^10.1.4",
-    "framer-motion": "^10.12.18",
+    "framer-motion": "^10.16.1",
     "graphql": "^16.8.0",
     "i18next": "^23.4.5",
     "inquirer-fuzzy-path": "^2.3.0",

diff --git a/src/components/atoms/LanguageSwitcher/LanguageSwitcher.tsx b/src/components/atoms/LanguageSwitcher/LanguageSwitcher.tsx
@@ -1,71 +1,94 @@
-import { InputLabel, MenuItem, Select, SelectChangeEvent } from '@mui/material';
+import {InputLabel, MenuItem, SelectChangeEvent} from '@mui/material';
 import FormControl from '@mui/material/FormControl';
-import { useState } from 'react';
+import {useState} from 'react';
 
-// export interface LanguageSwitcherProps {
-//   language: string;
-// }
+import i18n from '@/app/(public)/i18n';
+import clsx from "clsx";
+import {commonStyles} from "@/components/buttons/ModeToggleButton";
+import * as React from "react";
+import {HiLanguage} from "react-icons/hi2";
+import {useTheme} from "next-themes";
 
-interface Language {
+export interface LanguageSwitcherProps {
+  languages: LanguageDef[];
+}
+
+export interface LanguageDef {
   label: string;
   value: string;
-  enabled: boolean;
+  disabled?: boolean;
 }
 
-const languages: Language[] = [
-  {
-    label: '🇬🇧 EN',
-    value: 'en',
-    enabled: true,
-  },
-  {
-    label: '🇮🇹 IT',
-    value: 'it',
-    enabled: true,
-  },
-  {
-    label: '🇩🇪 DE',
-    value: 'de',
-    enabled: true,
-  },
-];
+const LanguageSwitcher = ({ languages } : LanguageSwitcherProps) => {
+  const { theme } = useTheme();
+  const isDarkMode = theme === 'dark';
 
-const LanguageSwitcher = () => {
   const [chosenLanguage, setChosenLanguage] = useState('');
 
   const handleChange = (event: SelectChangeEvent) => {
-    setChosenLanguage(event.target.value);
+    console.log(i18n.language);
+    const newLang = event.target.value;
+    setChosenLanguage(newLang);
+
+    i18n.changeLanguage(newLang);
+    console.log(i18n.language);
   };
 
-  const label = <>🌐</>;
+  const changeLanguage = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    console.log(i18n.language);
+    const newLang = event.target.value;
+    setChosenLanguage(newLang);
+
+    i18n.changeLanguage(newLang);
+    console.log(i18n.language);
+  };
+
+  const label = <HiLanguage/>;
 
   return (
-    <div>
-      <FormControl sx={{ m: 1, minWidth: 80 }} size='small'>
-        <InputLabel id='demo-select-small-label'>{label}</InputLabel>
-        <Select
-          id='demo-select-small'
-          labelId='demo-select-small-label'
-          value={chosenLanguage}
-          label={label}
-          onChange={handleChange}
-          style={{ fontSize: '14px' }}
-        >
-          {languages.map(
-            (lang: Language) =>
-              lang.enabled && (
-                <MenuItem
-                  className='font-light'
-                  style={{ fontSize: '14px', fontWeight: 300 }}
-                  key={lang.value}
-                  value={lang.value}
-                >
-                  {lang.label}
-                </MenuItem>
-              )
-          )}
-        </Select>
-      </FormControl>
+    <div className="p-2">
+      <select onChange={changeLanguage}
+        className="rounded-md border-2 dark:bg-transparent"
+      >
+        {languages.map(
+          (lang: LanguageDef) =>
+            !lang.disabled && (
+              <option
+                style={{fontSize: '14px', fontWeight: 300}}
+                key={lang.value}
+                value={lang.value}
+              >
+                {lang.label}
+              </option>
+            )
+        )}
+      </select>
+
+      {/*<FormControl sx={{m: 1, minWidth: 80, border: '2px solid white', color: isDarkMode ? 'white' : 'black'}} size='small'>*/}
+      {/*  <InputLabel id='demo-select-small-label'>{label}</InputLabel>*/}
+      {/*  <Select*/}
+      {/*    id='demo-select-small'*/}
+      {/*    labelId='demo-select-small-label'*/}
+      {/*    value={chosenLanguage}*/}
+      {/*    label={label}*/}
+      {/*    onChange={handleChange}*/}
+      {/*    style={{ fontSize: '14px' }}*/}
+      {/*  >*/}
+      {/*    {languages.map(*/}
+      {/*      (lang: LanguageDef) =>*/}
+      {/*        !lang.disabled && (*/}
+      {/*          <MenuItem*/}
+      {/*            className='font-light'*/}
+      {/*            style={{fontSize: '14px', fontWeight: 300}}*/}
+      {/*            key={lang.value}*/}
+      {/*            value={lang.value}*/}
+      {/*          >*/}
+      {/*            {lang.label}*/}
+      {/*          </MenuItem>*/}
+      {/*        )*/}
+      {/*    )}*/}
+      {/*  </Select>*/}
+      {/*</FormControl>*/}
     </div>
   );
 };

diff --git a/src/components/atoms/LanguageSwitcher/__stories__/LanguageSwitcher.stories.tsx b/src/components/atoms/LanguageSwitcher/__stories__/LanguageSwitcher.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta } from '@storybook/react';
 
 import LanguageSwitcher, {
+  LanguageDef,
   LanguageSwitcherProps,
 } from '@/components/atoms/LanguageSwitcher/LanguageSwitcher';
 
@@ -12,6 +13,33 @@ const meta: Meta<typeof LanguageSwitcher> = {
 
 export default meta;
 
+const languages: LanguageDef[] = [
+  {
+    label: '🇬🇧 EN',
+    value: 'en',
+  },
+  {
+    label: '🇮🇹 IT',
+    value: 'it',
+  },
+  {
+    label: '🇩🇪 DE',
+    value: 'de',
+  },
+  {
+    label: '🇫🇷 FR',
+    value: 'fr',
+  },
+  {
+    label: '🇪🇸 ES',
+    value: 'es',
+    disabled: true,
+  },
+];
+
 export const SampleStory = (args: LanguageSwitcherProps) => {
   return <LanguageSwitcher {...args} />;
 };
+SampleStory.args = {
+  languages
+}
diff --git a/src/components/buttons/ModeToggleButton.tsx b/src/components/buttons/ModeToggleButton.tsx
@@ -1,16 +1,16 @@
 import clsx from 'clsx';
-import { useTheme } from 'next-themes';
+import {useTheme} from 'next-themes';
 import * as React from 'react';
-import { useEffect, useState } from 'react';
-import { FiMoon, FiSun } from 'react-icons/fi';
+import {useEffect, useState} from 'react';
+import {FiMoon, FiSun} from 'react-icons/fi';
 
 type ThemeButtonProps = React.ComponentPropsWithoutRef<'button'>;
 
 export default function ModeToggleButton({
-  className,
-  ...rest
-}: ThemeButtonProps) {
-  const { theme, setTheme } = useTheme();
+                                           className,
+                                           ...rest
+                                         }: ThemeButtonProps) {
+  const {theme, setTheme} = useTheme();
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => setMounted(true), []);
@@ -20,17 +20,19 @@ export default function ModeToggleButton({
   }
 
   return (
-    <button
-      className={clsx(
-        'flex items-center justify-center rounded-md border-2 ' +
+    <div className="p-2">
+      <button
+        className={clsx(
+          'flex items-center justify-center rounded-md border-2 ' +
           'border-grey-300 ring-grey-300 bg-transparent p-2 transition-all hover:ring-2 hover:ring-offset-2 ' +
           'dark:border-grey-700 dark:ring-grey-200 dark:bg-transparent dark:hover:ring-2 dark:hover:ring-offset-2',
-        className,
-      )}
-      {...rest}
-      onClick={toggleMode}
-    >
-      {mounted ? <>{theme === 'light' ? <FiMoon /> : <FiSun />}</> : <FiSun />}
-    </button>
+          className,
+        )}
+        {...rest}
+        onClick={toggleMode}
+      >
+        {mounted ? <>{theme === 'light' ? <FiMoon/> : <FiSun/>}</> : <FiSun/>}
+      </button>
+    </div>
   );
 }
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -13,10 +13,13 @@ import { AiFillCaretDown, AiFillCaretUp } from 'react-icons/ai';
 import { useOnKeyDown } from '@/hooks/useOnKeyDown';
 
 import { BurgerIcon } from '@/components/atoms/BurgerIcon';
+import LanguageSwitcher, {LanguageDef} from "@/components/atoms/LanguageSwitcher/LanguageSwitcher";
 import ModeToggleButton from '@/components/buttons/ModeToggleButton';
 import UnstyledLink from '@/components/links/UnstyledLink';
 import { MobileMenu } from '@/components/molecules/MobileMenu/MobileMenu';
 
+import languages from '@/locales/languages.json';
+
 export const links = [
   { href: '/projects', label: 'headerMenu.projects' },
   { href: '/cv', label: 'headerMenu.cv' },
@@ -27,6 +30,8 @@ export const links = [
 export default function Header() {
   const { t } = useTranslation();
 
+  const languageDefs = languages as LanguageDef[];
+
   const [isOpen, setIsOpen] = useState(false);
 
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -115,7 +120,9 @@ export default function Header() {
               ))}
             </ul>
 
-            <div className='hidden md:block'>
+            <div className='hidden md:flex md:flex-row'>
+              <LanguageSwitcher languages={languageDefs}/>
+
               <ModeToggleButton />
             </div>
           </nav>

diff --git a/src/locales/languages.json b/src/locales/languages.json
@@ -0,0 +1,15 @@
+[
+  {
+    "label": "🇬🇧 EN",
+    "value": "en"
+  },
+  {
+    "label": "🇮🇹 IT",
+    "value": "it"
+  },
+  {
+    "label": "🇩🇪 DE",
+    "value": "de",
+    "disabled": true
+  }
+]