diff --git a/apps/polyflix/public/locales/en/common.json b/apps/polyflix/public/locales/en/common.json index 9d0bf09f..31285d8e 100644 --- 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." } } -} +} \ No newline at end of file diff --git a/apps/polyflix/public/locales/fr/common.json b/apps/polyflix/public/locales/fr/common.json index 9241c512..9f9dc80d 100644 --- 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." } } -} +} \ No newline at end of file diff --git a/apps/polyflix/src/modules/core/components/Footer/footer.component.tsx b/apps/polyflix/src/modules/core/components/Footer/footer.component.tsx index eefaf6bf..7faed686 100644 --- 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 ( - {/* TODO */} - - Footer + + {links.map((section, i) => ( + + + {t(section.title)} + + {section.child.map((link, j) => ( + + {t(link.title)} + + ))} + + ))} + + + + © Copyright Polyflix 2022 {t('footer.rights')}