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);