build: add footer

Signed-off-by: leofvo <[email protected]>
polyflix · Jan 12, 2023 · 1b09fad · 1b09fad
1 parent a8db6ef
commit 1b09fad
Show file tree

Hide file tree

Showing 3 changed files with 146 additions and 7 deletions.
diff --git a/apps/polyflix/public/locales/en/common.json b/apps/polyflix/public/locales/en/common.json
@@ -49,6 +49,26 @@
       }
     }
   },
+  "footer": {
+    "navigation": {
+      "title": "Navigation",
+      "homepage": "Homepage",
+      "videos": "Videos",
+      "courses": "Courses"
+    },
+    "account": {
+      "title": "My account",
+      "profile": "My profile",
+      "settings": "My settings"
+    },
+    "help": {
+      "title": "Support",
+      "cgu": "Terms of service",
+      "mentions": "Terms and conditions",
+      "bug": "Report a bug"
+    },
+    "rights": "All rights reserved."
+  },
   "speedDial": {
     "video": "Video",
     "quizz": "Quizz"
@@ -74,4 +94,4 @@
       "informations": "Activate the dark mode to preserve your eyes."
     }
   }
-}
+}
diff --git a/apps/polyflix/public/locales/fr/common.json b/apps/polyflix/public/locales/fr/common.json
@@ -49,6 +49,26 @@
       }
     }
   },
+  "footer": {
+    "navigation": {
+      "title": "Navigation",
+      "homepage": "Page d'accueil",
+      "videos": "Vidéos",
+      "courses": "Cours"
+    },
+    "account": {
+      "title": "Mon compte",
+      "profile": "Mon profil",
+      "settings": "Mes paramètres"
+    },
+    "help": {
+      "title": "Assistance",
+      "cgu": "Conditions générales d'utilisation",
+      "mentions": "Mentions légales",
+      "bug": "Signaler un bug"
+    },
+    "rights": "Tous droits réservés."
+  },
   "speedDial": {
     "video": "Vidéo",
     "quizz": "Quiz"
@@ -70,4 +90,4 @@
       "informations": "Activer le mode sombre pour préserver vos yeux."
     }
   }
-}
+}
diff --git a/apps/polyflix/src/modules/core/components/Footer/footer.component.tsx b/apps/polyflix/src/modules/core/components/Footer/footer.component.tsx
@@ -1,21 +1,120 @@
-import { Paper, Typography } from '@mui/material'
+import { Divider, Link, List, Paper, Stack, Typography } from '@mui/material'
+import { useTranslation } from 'react-i18next'
 import { PageSection } from '../PageSection/page-section.component'
 
 export const Footer = () => {
+  const { t } = useTranslation('common')
+
+  const links = [
+    {
+      title: 'footer.navigation.title',
+      child: [
+        {
+          title: 'footer.navigation.homepage',
+          href: '/',
+          props: {},
+        },
+        {
+          title: 'footer.navigation.videos',
+          href: '/videos/explore',
+          props: {},
+        },
+        {
+          title: 'footer.navigation.courses',
+          href: '/courses/explore',
+          props: {},
+        },
+      ],
+    },
+    {
+      title: 'footer.account.title',
+      child: [
+        {
+          title: 'footer.account.profile',
+          href: '/users/profile/videos',
+          props: {},
+        },
+        {
+          title: 'footer.account.settings',
+          href: '/users/profile/settings',
+          props: {},
+        },
+      ],
+    },
+    {
+      title: 'footer.help.title',
+      child: [
+        {
+          title: 'footer.help.cgu',
+          href: 'https://github.com/polyflix/polyflix/blob/main/CGU-Polyflix.pdf',
+          props: { rel: 'noopener noreferrer', target: '_blank' },
+        },
+        {
+          title: 'footer.help.mentions',
+          href: '#',
+          props: { rel: 'noopener noreferrer', target: '_blank' },
+        },
+        {
+          title: 'footer.help.bug',
+          href: 'https://docs.google.com/forms/d/e/1FAIpQLScy8UUG38btVXtym4UTBWrJKaOAMRA8-zY2yxCCeUyYolTjOA/viewform',
+          props: { rel: 'noopener noreferrer', target: '_blank' },
+        },
+      ],
+    },
+  ]
   return (
     <Paper
       variant="outlined"
       component={'footer'}
       sx={{
         minHeight: '200px',
-        p: 2,
+        p: '3rem',
         mt: 4,
       }}
     >
-      {/* TODO */}
       <PageSection>
-        <Typography variant="body1" color="initial">
-          Footer
+        <Stack
+          direction={{ xs: 'column', sm: 'row' }}
+          spacing={2}
+          justifyContent="space-between"
+          alignItems="top"
+          paddingBottom={2}
+        >
+          {links.map((section, i) => (
+            <List key={i}>
+              <Typography
+                variant="h5"
+                fontWeight={'bold'}
+                component={'p'}
+                paddingBottom={1}
+                sx={{ fontSize: '0.8em !important' }}
+              >
+                {t(section.title)}
+              </Typography>
+              {section.child.map((link, j) => (
+                <Link
+                  key={j}
+                  href={link.href}
+                  underline="none"
+                  variant="body2"
+                  sx={{ display: 'block' }}
+                  color="inherit"
+                  {...link.props}
+                >
+                  {t(link.title)}
+                </Link>
+              ))}
+            </List>
+          ))}
+        </Stack>
+        <Divider orientation="horizontal" flexItem />
+        <Typography
+          variant="body2"
+          paddingTop={2}
+          width="100%"
+          textAlign="center"
+        >
+          &copy; Copyright Polyflix 2022 {t('footer.rights')}
         </Typography>
       </PageSection>
     </Paper>