feat: add language switch

packages/app/src/components/workspace-modal/index.tsx

@@ -2,6 +2,7 @@ import { styled } from '@/styles';
 import { Modal, ModalWrapper, ModalCloseButton } from '@/ui/modal';
 import { Button } from '@/ui/button';
 import { useEffect, useState } from 'react';
+import { LanguageMenu } from './languageMenu';
 import {
   getWorkspaces,
   Workspace,
@@ -56,6 +57,7 @@ export const WorkspaceModal = ({ open, onClose }: LoginModalProps) => {
         >
           <Header>
             <ContentTitle>My Workspaces</ContentTitle>
+            <LanguageMenu />
             <ModalCloseButton
               top={6}
               right={6}

packages/app/src/components/workspace-modal/languageMenu.tsx

@@ -0,0 +1,95 @@
+import { LOCALES } from '@/libs/i18n/resources/index';
+import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
+import type { TooltipProps } from '@mui/material';
+import { styled } from '@/styles';
+import { Button, Tooltip } from '@mui/material';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export const LanguageMenu = () => {
+  const { i18n } = useTranslation();
+  const changeLanguage = (event: string) => {
+    i18n.changeLanguage(event);
+  };
+  const [show, setShow] = useState(false);
+  const currentLanguage = LOCALES.find(item => item.tag === i18n.language);
+  const [languageName, setLanguageName] = useState(
+    currentLanguage?.originalName
+  );
+  return (
+    <StyledTooltip
+      title={
+        <>
+          {LOCALES.map(option => {
+            return (
+              <ListItem
+                key={option.name}
+                title={option.name}
+                onClick={() => {
+                  changeLanguage(option.tag);
+                  setShow(false);
+                  setLanguageName(option.originalName);
+                }}
+              >
+                {option.originalName}
+              </ListItem>
+            );
+          })}
+        </>
+      }
+      open={show}
+    >
+      <StyledTitleButton
+        variant="text"
+        onClick={() => {
+          setShow(!show);
+        }}
+      >
+        <StyledContainer>
+          <StyledText>{languageName}</StyledText>
+          <UnfoldMoreIcon />
+        </StyledContainer>
+      </StyledTitleButton>
+    </StyledTooltip>
+  );
+};
+
+const StyledContainer = styled('div')(() => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+const StyledText = styled('span')(({ theme }) => ({
+  marginRight: '4px',
+  marginLeft: '16px',
+  fontSize: theme.font.sm,
+  fontWeight: '500',
+  textTransform: 'capitalize',
+}));
+const StyledTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  zIndex: theme.zIndex.modal,
+  '& .MuiTooltip-tooltip': {
+    backgroundColor: theme.colors.popoverBackground,
+    boxShadow: theme.shadow.modal,
+    color: theme.colors.popoverColor,
+  },
+}));
+
+const ListItem = styled(Button)(({ theme }) => ({
+  display: 'block',
+  width: '100%',
+  color: theme.colors.popoverColor,
+  fontSize: theme.font.sm,
+  textTransform: 'capitalize',
+}));
+
+const StyledTitleButton = styled(Button)(({ theme }) => ({
+  position: 'absolute',
+  right: '50px',
+  color: theme.colors.popoverColor,
+  fontSize: theme.font.sm,
+}));

packages/app/src/components/workspace-modal/styles.ts

@@ -1,4 +1,7 @@
 import { displayFlex, styled } from '@/styles';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
 
 export const StyledTitle = styled.div(() => {
   return {
@@ -36,3 +39,20 @@ export const StyledButton = styled.div(({ theme }) => {
     ...displayFlex('center', 'center'),
   };
 });
+export const StyledFormControl = styled(FormControl)(({ theme }) => {
+  return {
+    position: 'absolute',
+    minWidth: '100px',
+    right: '50px',
+    backgroundColor: theme.colors.popoverBackground,
+  };
+});
+export const StyledSelect = styled(Select)(({ theme }) => {
+  return {
+    backgroundColor: theme.colors.popoverBackground,
+    color: theme.colors.popoverColor,
+  };
+});
+export const StyledMenuItem = styled(MenuItem)(() => {
+  return {};
+});