diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-11-20 12:27:46 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-20 19:32:09 +0100 |
| commit | 70b4f633a6fbedb58c8b9134ac64ede854d489de (patch) | |
| tree | c757bb12ad9a588e23b25cdb8b46710ac14dbcb1 /src/components/templates/page/page-footer.tsx | |
| parent | 9a481f066e1427d53a06cf7aeec525a745abf03f (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.tsx | 54 |
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); |
