aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/templates/page/page-footer.tsx
diff options
context:
space:
mode:
authorArmand Philippot <git@armandphilippot.com>2023-11-20 12:27:46 +0100
committerArmand Philippot <git@armandphilippot.com>2023-11-20 19:32:09 +0100
commit70b4f633a6fbedb58c8b9134ac64ede854d489de (patch)
treec757bb12ad9a588e23b25cdb8b46710ac14dbcb1 /src/components/templates/page/page-footer.tsx
parent9a481f066e1427d53a06cf7aeec525a745abf03f (diff)
refactor(components): replace PageLayout template with Page
* split pages in smaller components (it is both easier to maintain and more readable, we avoid the use of fragments in pages directory) * extract breadcrumbs from article tag (the navigation is not related to the page contents) * remove useReadingTime hook * remove layout options except `isHome`
Diffstat (limited to 'src/components/templates/page/page-footer.tsx')
-rw-r--r--src/components/templates/page/page-footer.tsx54
1 files changed, 54 insertions, 0 deletions
diff --git a/src/components/templates/page/page-footer.tsx b/src/components/templates/page/page-footer.tsx
new file mode 100644
index 0000000..3bfece4
--- /dev/null
+++ b/src/components/templates/page/page-footer.tsx
@@ -0,0 +1,54 @@
+import NextImage from 'next/image';
+import { type ForwardRefRenderFunction, forwardRef } from 'react';
+import { useIntl } from 'react-intl';
+import type { PageLink } from '../../../types';
+import { Footer, type FooterProps, ButtonLink } from '../../atoms';
+import { MetaList, MetaItem } from '../../molecules';
+import styles from './page.module.scss';
+
+export type PageFooterProps = Omit<FooterProps, 'children'> & {
+ readMoreAbout: PageLink[];
+};
+
+const PageFooterWithRef: ForwardRefRenderFunction<
+ HTMLElement,
+ PageFooterProps
+> = ({ className = '', readMoreAbout, ...props }, ref) => {
+ const footerClass = `${styles.footer} ${className}`;
+ const intl = useIntl();
+ const metaLabel = intl.formatMessage({
+ defaultMessage: 'Read more posts about:',
+ description: 'PageFooter: the topics list label',
+ id: 'I6vhfk',
+ });
+
+ return (
+ <Footer {...props} className={footerClass} ref={ref}>
+ {readMoreAbout.length ? (
+ <MetaList>
+ <MetaItem
+ hasInlinedValues
+ label={metaLabel}
+ value={readMoreAbout.map((item) => {
+ return {
+ id: `${item.id}`,
+ value: (
+ <ButtonLink className={styles.btn} to={item.url}>
+ <>
+ {item.logo ? (
+ <NextImage {...item.logo} className={styles.logo} />
+ ) : null}
+ {item.name}
+ </>
+ </ButtonLink>
+ ),
+ };
+ })}
+ />
+ </MetaList>
+ ) : null}
+ </Footer>
+ );
+};
+
+export const PageFooter = forwardRef(PageFooterWithRef);