Merge pull request #132 from P4-Games/feature/footer-social

merge feature/footer-social into develop
P4-Games · Oct 17, 2024 · d5bab31 · d5bab31
2 parents 1db94ff + 0ac593a
commit d5bab31
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 26 deletions.
diff --git a/src/config-global.ts b/src/config-global.ts
@@ -191,28 +191,48 @@ export const _socials = [
     value: 'facebook',
     name: 'FaceBook',
     icon: 'eva:facebook-fill',
-    color: '#1877F2',
-    path: 'https://www.facebook.com/caitlyn.kerluke'
+    colorDark: '#1877F2',
+    colorLight: '#1877F2',
+    path: 'https://www.facebook.com/chatterpay'
   },
   {
     value: 'instagram',
     name: 'Instagram',
     icon: 'ant-design:instagram-filled',
-    color: '#E02D69',
-    path: 'https://www.instagram.com/caitlyn.kerluke'
+    colorDark: '#E02D69',
+    colorLight: '#E02D69',
+    path: 'https://www.instagram.com/chatterpayofficial'
   },
   {
     value: 'linkedin',
     name: 'Linkedin',
     icon: 'eva:linkedin-fill',
-    color: '#007EBB',
-    path: 'https://www.linkedin.com/caitlyn.kerluke'
+    colorDark: '#007EBB',
+    colorLight: '#007EBB',
+    path: 'https://www.linkedin.com/company/chatterpay'
   },
   {
-    value: 'twitter',
-    name: 'Twitter',
+    value: 'X',
+    name: 'X',
     icon: 'eva:twitter-fill',
-    color: '#00AAEC',
-    path: 'https://www.twitter.com/caitlyn.kerluke'
+    colorDark: '#00AAEC',
+    colorLight: '#00AAEC',
+    path: 'https://www.twitter.com/chatterpay'
+  },
+  {
+    value: 'youtube',
+    name: 'YouTube',
+    icon: 'logos:youtube-icon',
+    colorDark: '#FF0000',
+    colorLight: '#FF0000',
+    path: 'https://www.youtube.com/@chatterpay'
+  },
+  {
+    value: 'github',
+    name: 'Github',
+    icon: 'eva:github-fill',
+    colorDark: '#FFFFFF',
+    colorLight: '#181717',
+    path: 'https://github.com/chatterpay'
   }
 ]
diff --git a/src/layouts/main/footer.tsx b/src/layouts/main/footer.tsx
@@ -2,14 +2,13 @@ import Box from '@mui/material/Box'
 import Link from '@mui/material/Link'
 import Stack from '@mui/material/Stack'
 import Divider from '@mui/material/Divider'
-import { alpha } from '@mui/material/styles'
 import Container from '@mui/material/Container'
 import Grid from '@mui/material/Unstable_Grid2'
 import IconButton from '@mui/material/IconButton'
 import Typography from '@mui/material/Typography'
+import { alpha, useTheme } from '@mui/material/styles'
 
 import { paths } from 'src/routes/paths'
-import { usePathname } from 'src/routes/hooks'
 import { RouterLink } from 'src/routes/components'
 
 import { useTranslate } from 'src/locales'
@@ -20,11 +19,14 @@ import Iconify from 'src/components/iconify'
 
 // ----------------------------------------------------------------------
 
-export default function Footer() {
-  const pathname = usePathname()
-  const { t } = useTranslate()
+interface FooterProps {
+  simple: boolean
+}
 
-  const homePage = pathname === '/'
+export default function Footer({ simple }: FooterProps) {
+  const { t } = useTranslate()
+  const theme = useTheme()
+  const lightMode = theme.palette.mode === 'light'
   const contactUsUrl = BOT_WAPP_URL.replaceAll('MESSAGE', t('home.common.contact-us-wapp-msg'))
 
   const LINKS = [
@@ -117,16 +119,26 @@ export default function Footer() {
               }}
             >
               {_socials.map((social) => (
-                <IconButton
+                <a
                   key={social.name}
-                  sx={{
-                    '&:hover': {
-                      bgcolor: alpha(social.color, 0.08)
-                    }
-                  }}
+                  href={social.path}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                  style={{ textDecoration: 'none' }}
                 >
-                  <Iconify color={social.color} icon={social.icon} />
-                </IconButton>
+                  <IconButton
+                    sx={{
+                      '&:hover': {
+                        bgcolor: alpha(lightMode ? social.colorLight : social.colorDark, 0.08)
+                      }
+                    }}
+                  >
+                    <Iconify
+                      color={lightMode ? social.colorLight : social.colorDark}
+                      icon={social.icon}
+                    />
+                  </IconButton>
+                </a>
               ))}
             </Stack>
           </Grid>
@@ -168,5 +180,5 @@ export default function Footer() {
     </Box>
   )
 
-  return homePage ? simpleFooter : mainFooter
+  return simple ? simpleFooter : mainFooter
 }
diff --git a/src/layouts/main/index.tsx b/src/layouts/main/index.tsx
@@ -32,7 +32,7 @@ export default function MainLayout({ children }: Props) {
         {children}
       </Box>
 
-      <Footer />
+      <Footer simple={false} />
     </Box>
   )
 }