1 files changed, 69 insertions, 0 deletions
diff --git a/client/src/components/LanguageSelect/LanguageSelect.jsx b/client/src/components/LanguageSelect/LanguageSelect.jsx
new file mode 100644
index 0000000..dd2997f
--- /dev/null
+++ b/client/src/components/LanguageSelect/LanguageSelect.jsx
@@ -0,0 +1,69 @@
+import React, { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import i18next from 'i18next'
+import { Button, Popover, List, ListItem, ListSubheader } from '@mui/material'
+
+import styles from './LanguageSelect.module.css'
+
+const languageMap = {
+  en: { label: 'English', dir: 'ltr', active: true },
+  hi: { label: 'Hindi', dir: 'ltr', active: false }
+}
+
+const LanguageSelect = () => {
+  const selected = localStorage.getItem('i18nextLng') || 'en'
+  const { t } = useTranslation()
+
+  const [menuAnchor, setMenuAnchor] = useState(null)
+  useEffect(() => {
+    document.body.dir = languageMap[selected]?.dir
+  }, [menuAnchor, selected])
+
+  return (
+    <div className={styles.language}>
+      <Button
+        onClick={({ currentTarget }) => setMenuAnchor(currentTarget)}
+        sx={{ margin: '0px 15px', padding: '0px' }}
+      >
+        <img
+          src={`${process.env.PUBLIC_URL}/assets/images/language.svg`}
+          height="80px"
+          width="80px"
+        />
+      </Button>
+      <Popover
+        open={!!menuAnchor}
+        anchorEl={menuAnchor}
+        onClose={() => setMenuAnchor(null)}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right'
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right'
+        }}
+      >
+        <div>
+          <List>
+            <ListSubheader>{t('SELECT_LANGUAGE')}</ListSubheader>
+            {Object.keys(languageMap)?.map((item) => (
+              <ListItem
+                button
+                key={item}
+                onClick={() => {
+                  i18next.changeLanguage(item)
+                  setMenuAnchor(null)
+                }}
+              >
+                {languageMap[item].label}
+              </ListItem>
+            ))}
+          </List>
+        </div>
+      </Popover>
+    </div>
+  )
+}
+
+export default LanguageSelect