feat(components): add Article, Aside, Footer, Header, Main & Nav

Some components have been renamed to be able to create Footer, Header
and Nav.

2 files changed, 13 insertions, 18 deletions

diff --git a/src/components/molecules/layout/page-footer.tsx b/src/components/molecules/layout/page-footer.tsx
index 786fca0..5f3b176 100644
--- a/src/components/molecules/layout/page-footer.tsx
+++ b/src/components/molecules/layout/page-footer.tsx
@@ -1,11 +1,8 @@
-import { FC } from 'react';
-import { Meta, MetaData } from './meta';
+import type { FC } from 'react';
+import { Footer, type FooterProps } from '../../atoms';
+import { Meta, type MetaData } from './meta';
 
-export type PageFooterProps = {
-  /**
-   * Set additional classnames to the footer element.
-   */
-  className?: string;
+export type PageFooterProps = Omit<FooterProps, 'children'> & {
   /**
    * The footer metadata.
    */
@@ -15,12 +12,10 @@ export type PageFooterProps = {
 /**
  * PageFooter component
  *
- * Render a footer element to display page meta.
+ * Render a footer to display page meta.
  */
-export const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => {
-  return (
-    <footer {...props}>
-      {meta && <Meta data={meta} withSeparator={false} />}
-    </footer>
-  );
-};
+export const PageFooter: FC<PageFooterProps> = ({ meta, ...props }) => (
+  <Footer {...props}>
+    {meta ? <Meta data={meta} withSeparator={false} /> : null}
+  </Footer>
+);
diff --git a/src/components/molecules/layout/page-header.tsx b/src/components/molecules/layout/page-header.tsx
index 04f2966..92650c5 100644
--- a/src/components/molecules/layout/page-header.tsx
+++ b/src/components/molecules/layout/page-header.tsx
@@ -1,5 +1,5 @@
 import type { FC, ReactNode } from 'react';
-import { Heading } from '../../atoms';
+import { Header, Heading } from '../../atoms';
 import { Meta, type MetaData } from './meta';
 import styles from './page-header.module.scss';
 
@@ -50,7 +50,7 @@ export const PageHeader: FC<PageHeaderProps> = ({
   };
 
   return (
-    <header className={headerClass}>
+    <Header className={headerClass}>
       <div className={styles.body}>
         <Heading className={styles.title} level={1}>
           {title}
@@ -67,6 +67,6 @@ export const PageHeader: FC<PageHeaderProps> = ({
         ) : null}
         {intro ? getIntro() : null}
       </div>
-    </header>
+    </Header>
   );
 };