From 91fd10ebda13d9dcfbadf866c65e1b38cd9b23dd Mon Sep 17 00:00:00 2001 From: Ali BARIN Date: Mon, 10 Mar 2025 09:36:40 +0000 Subject: [PATCH] feat(Layout): add custom footer --- packages/web/public/index.html | 9 +- .../web/src/components/CustomLogo/style.ee.js | 1 + .../src/components/Layout/Footer/index.jsx | 126 ++++++++++++++++++ packages/web/src/components/Layout/index.jsx | 3 + .../src/components/ThemeProvider/index.jsx | 12 ++ packages/web/src/styles/theme.js | 7 + 6 files changed, 157 insertions(+), 1 deletion(-) create mode 100644 packages/web/src/components/Layout/Footer/index.jsx diff --git a/packages/web/public/index.html b/packages/web/public/index.html index 26c342fd..3c6345fb 100644 --- a/packages/web/public/index.html +++ b/packages/web/public/index.html @@ -1,4 +1,4 @@ - + @@ -25,6 +25,7 @@ crossorigin type="font/ttf" /> + + + diff --git a/packages/web/src/components/CustomLogo/style.ee.js b/packages/web/src/components/CustomLogo/style.ee.js index e38a9691..fd2d15be 100644 --- a/packages/web/src/components/CustomLogo/style.ee.js +++ b/packages/web/src/components/CustomLogo/style.ee.js @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; + export const LogoImage = styled('img')(() => ({ maxWidth: 200, maxHeight: 22, diff --git a/packages/web/src/components/Layout/Footer/index.jsx b/packages/web/src/components/Layout/Footer/index.jsx new file mode 100644 index 00000000..ef0d3f28 --- /dev/null +++ b/packages/web/src/components/Layout/Footer/index.jsx @@ -0,0 +1,126 @@ +import styled from '@emotion/styled'; +import Box from '@mui/material/Box'; +import Divider from '@mui/material/Divider'; +import Link from '@mui/material/Link'; +import Stack from '@mui/material/Stack'; +import SvgIcon from '@mui/material/SvgIcon'; +import Typography from '@mui/material/Typography'; + +import useAutomatischConfig from 'hooks/useAutomatischConfig'; +import useFormatMessage from 'hooks/useFormatMessage'; +import useVersion from 'hooks/useVersion'; + +const LogoImage = styled('img')(() => ({ + maxWidth: 'auto', + height: 22, +})); + +const LayoutFooter = () => { + const { data: config, isPending: isConfigPending } = useAutomatischConfig(); + const formatMessage = useFormatMessage(); + + const links = [ + { + key: 'docs', + show: !!config.data.footerDocsLink, + href: config.data.footerDocsLink, + text: formatMessage('footer.docsLinkText'), + }, + { + key: 'terms-of-services', + show: !!config.data.footerTosLink, + href: config.data.footerTosLink, + text: formatMessage('footer.tosLinkText'), + }, + + { + key: 'privacy-policy', + show: !!config.data.footerPrivacyPolicyLink, + href: config.data.footerPrivacyPolicyLink, + text: formatMessage('footer.privacyPolicyLinkText'), + }, + + { + key: 'imprint', + show: !!config.data.footerImprintLink, + href: config.data.footerImprintLink, + text: formatMessage('footer.imprintLinkText'), + }, + , + ]; + + if (config.data.enableFooter !== true) return null; + + return ( + + + + + theme.palette.footer.main, + color: (theme) => theme.palette.footer.text, + }} + > +
+ {config.data.footerLogoSvgData && ( + <> + + + )} +
+ +
+ {config.data.footerCopyrightText && ( + + {config.data.footerCopyrightText} + + )} +
+ + + {links + .filter((link) => link.show) + .map((link) => ( + + {link.text} + + ))} + + + + + ); +}; + +export default LayoutFooter; diff --git a/packages/web/src/components/Layout/index.jsx b/packages/web/src/components/Layout/index.jsx index 3e96442b..e9542f9e 100644 --- a/packages/web/src/components/Layout/index.jsx +++ b/packages/web/src/components/Layout/index.jsx @@ -19,6 +19,8 @@ import AppBar from 'components/AppBar'; import Drawer from 'components/Drawer'; import useAutomatischConfig from 'hooks/useAutomatischConfig'; +import Footer from './Footer'; + const additionalDrawerLinkIcons = { Security: SecurityIcon, ArrowBackIosNew: ArrowBackIosNewIcon, @@ -141,6 +143,7 @@ function PublicLayout({ children }) { {children} +