1 files changed, 67 insertions, 0 deletions
diff --git a/client/src/components/LanguageSelect/LanguageSelect.js b/client/src/components/LanguageSelect/LanguageSelect.js
new file mode 100644
index 0000000..ac455b8
--- /dev/null
+++ b/client/src/components/LanguageSelect/LanguageSelect.js
@@ -0,0 +1,67 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import i18next from 'i18next'
+
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
+import Button from '@mui/material/Button'
+import Popover from '@mui/material/Popover'
+import List from '@mui/material/List'
+import ListItem from '@mui/material/ListItem'
+import ListSubheader from '@mui/material/ListSubheader'
+
+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] = React.useState(null)
+  React.useEffect(() => {
+    document.body.dir = languageMap[selected]?.dir
+  }, [menuAnchor, selected])
+
+  return (
+    <div className="d-flex justify-content-end align-items-center language-select-root">
+      <Button onClick={({ currentTarget }) => setMenuAnchor(currentTarget)}>
+        {languageMap[selected]?.label}
+        <ArrowDropDown fontSize="small" />
+      </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