From de878ed299d51b5b3688deb8aa256a5fc0e8db44 Mon Sep 17 00:00:00 2001
From: mrviniciux <httpmarks@gmail.com>
Date: Thu, 7 Nov 2024 19:06:17 -0300
Subject: [PATCH] feat(menu-footer): improved menu footer

---
 src/app/[locale]/ClientLayout.tsx             |  3 ++-
 src/components/FooterMenu/FooterMenu.tsx      | 18 +++++++++++++
 src/components/FooterMenu/index.ts            |  1 +
 .../LanguageSelector/LanguageSelector.tsx     | 25 ++++++++++++++++---
 src/i18n/messages/en-US.json                  |  3 +++
 src/i18n/messages/pt-BR.json                  |  3 +++
 6 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 src/components/FooterMenu/FooterMenu.tsx
 create mode 100644 src/components/FooterMenu/index.ts

diff --git a/src/app/[locale]/ClientLayout.tsx b/src/app/[locale]/ClientLayout.tsx
index a091916..98289f1 100644
--- a/src/app/[locale]/ClientLayout.tsx
+++ b/src/app/[locale]/ClientLayout.tsx
@@ -14,6 +14,7 @@ import { DashboardLayout } from '@toolpad/core/DashboardLayout';
 import { PageContainer } from '@toolpad/core/PageContainer';
 import { useTranslations } from 'next-intl';
 import LanguageSelector from '@/components/LanguageSelector';
+import FooterMenu from '@/components/FooterMenu';
 
 type ClientLayoutProps = {
   locale: string;
@@ -35,7 +36,7 @@ export default function ClientLayout({ locale, children }: ClientLayoutProps) {
           <SessionProvider>
             <QueryClientProvider client={queryClient}>
               <Auth>
-                <DashboardLayout slots={{ sidebarFooter: LanguageSelector }}>
+                <DashboardLayout slots={{ sidebarFooter: FooterMenu }}>
                   <PageContainer maxWidth={false}>{children}</PageContainer>
                 </DashboardLayout>
               </Auth>
diff --git a/src/components/FooterMenu/FooterMenu.tsx b/src/components/FooterMenu/FooterMenu.tsx
new file mode 100644
index 0000000..56b50c6
--- /dev/null
+++ b/src/components/FooterMenu/FooterMenu.tsx
@@ -0,0 +1,18 @@
+import { Box, Typography } from '@mui/material';
+import LanguageSelector from '../LanguageSelector';
+import Link from 'next/link';
+
+function FooterMenu() {
+  return (
+    <Box>
+      <LanguageSelector labeled />
+
+      <Typography variant="caption" paddingLeft={2}>
+        Developed by:{' '}
+        <Link href={'https://github.com/mrviniciux'}>@mrviniciux</Link> - 2024
+      </Typography>
+    </Box>
+  );
+}
+
+export default FooterMenu;
diff --git a/src/components/FooterMenu/index.ts b/src/components/FooterMenu/index.ts
new file mode 100644
index 0000000..70d0f2c
--- /dev/null
+++ b/src/components/FooterMenu/index.ts
@@ -0,0 +1 @@
+export { default } from './FooterMenu';
diff --git a/src/components/LanguageSelector/LanguageSelector.tsx b/src/components/LanguageSelector/LanguageSelector.tsx
index 3440a4c..29ce0a9 100644
--- a/src/components/LanguageSelector/LanguageSelector.tsx
+++ b/src/components/LanguageSelector/LanguageSelector.tsx
@@ -6,16 +6,23 @@ import {
   MenuItem,
   FormControl,
   SelectChangeEvent,
+  Container,
+  Typography,
+  Box,
 } from '@mui/material';
 import Flag from 'react-world-flags';
 import { useRouter } from 'next/navigation';
-import { useLocale } from 'next-intl';
+import { useLocale, useTranslations } from 'next-intl';
+import { SidebarFooterProps } from '@toolpad/core';
 
-interface LanguageSelectProps {}
+type LanguageSelectProps = {
+  labeled?: boolean;
+};
 
-const LanguageSelector: React.FC<LanguageSelectProps> = () => {
+const LanguageSelector: React.FC<LanguageSelectProps> = ({ labeled }) => {
   const router = useRouter();
   const locale = useLocale();
+  const translate = useTranslations();
 
   const handleChange = (event: SelectChangeEvent<string>) => {
     const selectedLocale = event.target.value as string;
@@ -35,7 +42,7 @@ const LanguageSelector: React.FC<LanguageSelectProps> = () => {
     },
   ];
 
-  return (
+  const InputLanguage = () => (
     <FormControl variant="outlined" size="small">
       <Select
         value={locale} // Idioma atual
@@ -52,6 +59,16 @@ const LanguageSelector: React.FC<LanguageSelectProps> = () => {
       </Select>
     </FormControl>
   );
+
+  if (!labeled) return <InputLanguage />;
+
+  return (
+    <Box padding={2}>
+      <Typography variant="caption">{translate('menu.languages')}</Typography>{' '}
+      <br />
+      <InputLanguage />
+    </Box>
+  );
 };
 
 export default LanguageSelector;
diff --git a/src/i18n/messages/en-US.json b/src/i18n/messages/en-US.json
index 4f9c9d1..b20c433 100644
--- a/src/i18n/messages/en-US.json
+++ b/src/i18n/messages/en-US.json
@@ -6,5 +6,8 @@
   },
   "orders": {
     "title": "Orders"
+  },
+  "menu": {
+    "languages": "Languages:"
   }
 }
\ No newline at end of file
diff --git a/src/i18n/messages/pt-BR.json b/src/i18n/messages/pt-BR.json
index 9992461..bdace5e 100644
--- a/src/i18n/messages/pt-BR.json
+++ b/src/i18n/messages/pt-BR.json
@@ -6,5 +6,8 @@
   },
   "orders": {
     "title": "Pedidos"
+  },
+  "menu": {
+    "languages": "Idiomas:"
   }
 }
\ No newline at end of file