Merge pull request #11 from instytutfi/feature/language-toggler

Author: mciszczon

package.json

@@ -1,7 +1,7 @@
 {
   "name": "estateguru-tax",
   "private": true,
-  "version": "1.0.2",
+  "version": "1.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/common/constants.ts

@@ -13,7 +13,16 @@ const DEDUCTION_TYPES = [
   'Sale fee', 'Secondary Market Loss', 'Fee'
 ] as const
 
+const LANG_CODES = ['en', 'pl'] as const
+
+const LANG_ICONS = {
+  en: '🇬🇧',
+  pl: '🇵🇱'
+} as const
+
 export {
   INCOME_TYPES,
-  DEDUCTION_TYPES
+  DEDUCTION_TYPES,
+  LANG_CODES,
+  LANG_ICONS
 }

src/components/LanguageSwitcher/LanguageSwitcher.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import { render } from '@testing-library/react'
+
+import LanguageSwitcher from './LanguageSwitcher'
+
+describe('LanguageSwitcher', () => {
+  it('renders without error', async () => {
+    render(<LanguageSwitcher />)
+  })
+})

src/components/LanguageSwitcher/LanguageSwitcher.tsx

@@ -0,0 +1,75 @@
+import React, { type FC, Fragment } from 'react'
+
+import { Menu, Transition } from '@headlessui/react'
+import clsx from 'clsx'
+import { useTranslation } from 'react-i18next'
+
+import { type LANG_CODES, LANG_ICONS } from 'common/constants'
+
+const Item: FC<ItemProps> = ({ language }) => {
+  const { i18n, t } = useTranslation()
+
+  const handleClick = async (): Promise<void> => {
+    await i18n.changeLanguage(language)
+  }
+
+  return (
+    <Menu.Item>
+      {({ active }) => (
+        <button
+          // eslint-disable-next-line @typescript-eslint/no-misused-promises
+          onClick={handleClick}
+          className={clsx(
+            'flex w-full items-center rounded-md px-4 py-2 font-medium transition-all',
+            !active && 'text-gray-900',
+            active && 'bg-blue-600 text-white'
+          )}
+        >
+          <span className="text-xl mr-2">
+            {LANG_ICONS[language]}
+          </span>
+          {t(`languageSwitcher.${i18n.language}.${language}.label`)}
+        </button>
+      )}
+    </Menu.Item>
+  )
+}
+
+interface ItemProps {
+  language: typeof LANG_CODES[number]
+}
+
+const LanguageSwitcher: FC = () => {
+  const { i18n, t } = useTranslation()
+
+  return (
+    <Menu as="div" className="relative">
+      <Menu.Button className="flex items-center text-slate-300 font-medium hover:text-blue-500 transition-all">
+        <span className="text-xl mr-2">
+          {LANG_ICONS[i18n.language as typeof LANG_CODES[number]]}
+        </span>
+        <span className="hidden sm:block">
+          {t(`languageSwitcher.${i18n.language}.${i18n.language}.label`)}
+        </span>
+      </Menu.Button>
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items
+          className="absolute right-0 mt-2 p-2 w-44 origin-top-right divide-y divide-gray-100 rounded-md bg-slate-50 shadow-2xl shadow-slate-800/40 ring-1 ring-black ring-opacity-5 focus:outline-none"
+        >
+          <Item language="pl" />
+          <Item language="en" />
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  )
+}
+
+export default LanguageSwitcher

src/components/LanguageSwitcher/index.ts

@@ -0,0 +1 @@
+export { default } from './LanguageSwitcher'

src/components/Navbar/Navbar.tsx

@@ -6,6 +6,8 @@ import { useTranslation } from 'react-i18next'
 
 import { GithubIcon } from 'assets/icons'
 
+import { LanguageSwitcher } from 'components'
+
 const Navbar: FC = () => {
   const { t } = useTranslation()
   const [isLogoHovered, setIsLogoHovered] = useState<boolean>(false)
@@ -26,14 +28,17 @@ const Navbar: FC = () => {
                 {t('app.name')}
               </span>
             </a>
-            <a
-              target="_blank"
-              rel="noopener noreferrer"
-              href="https://github.com/instytutfi/estateguru-tax"
-              className="text-slate-500 hover:text-white transition-all"
-            >
-              <GithubIcon className="h-6 w-6" />
-            </a>
+            <div className="flex items-center gap-8">
+              <LanguageSwitcher />
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href="https://github.com/instytutfi/estateguru-tax"
+                className="text-slate-500 hover:text-white transition-all"
+              >
+                <GithubIcon className="h-6 w-6" />
+              </a>
+            </div>
           </div>
         </div>
       </div>

src/components/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable sort-imports, import/order */
 
 /* PLOP_INJECT_EXPORT */
+export { default as LanguageSwitcher } from './LanguageSwitcher'
 export { default as Alert } from './Alert'
 export { default as Checkbox } from './Checkbox'
 export { default as Faq } from './Faq'

src/locale/en.json

@@ -40,5 +40,9 @@
   "faq.related.answer": "No. The Estateguru Tax Calculator is not related to Estateguru. It is an independent tool created by a third party. Estateguru does not endorse the use of the Estateguru Tax Calculator, and it does not take any responsibility for the results of the calculations generated by the tool.",
   "footer.disclaimer": "Results rendered by the use of this tool should be treated as suggestions and are not guaranteed to be accurate calculations of the actual Estateguru investment income, nor the amount of income tax that ought to be paid. Always consult a professional accountant. The creator of this tool takes no responsibility for the calculations generated by the Estateguru Tax Calculator.",
   "footer.copyright": "© {year} Mateusz Ciszczoń/{fiLink}",
-  "footer.oss": "Estateguru Tax Calculator is an open source tool. Feel free to improve it!"
+  "footer.oss": "Estateguru Tax Calculator is an open source tool. Feel free to improve it!",
+  "languageSwitcher.en.en.label": "English",
+  "languageSwitcher.en.pl.label": "Polish",
+  "languageSwitcher.pl.en.label": "angielski",
+  "languageSwitcher.pl.pl.label": "polski"
 }