diff options
Diffstat (limited to 'src/components/organisms/layout/footer.tsx')
| -rw-r--r-- | src/components/organisms/layout/footer.tsx | 52 |
1 files changed, 52 insertions, 0 deletions
diff --git a/src/components/organisms/layout/footer.tsx b/src/components/organisms/layout/footer.tsx new file mode 100644 index 0000000..c9cb067 --- /dev/null +++ b/src/components/organisms/layout/footer.tsx @@ -0,0 +1,52 @@ +import Copyright, { CopyrightProps } from '@components/atoms/layout/copyright'; +import BackToTop from '@components/molecules/buttons/back-to-top'; +import Nav, { type NavItem } from '@components/molecules/nav/nav'; +import { VFC } from 'react'; +import styles from './footer.module.scss'; + +export type FooterProps = { + /** + * Set additional classnames to the footer element. + */ + className?: string; + /** + * Set the copyright information. + */ + copyright: CopyrightProps; + /** + * The footer nav items. + */ + navItems?: NavItem[]; + /** + * An element id (without hashtag) used as anchor for back to top button. + */ + topId: string; +}; + +/** + * Footer component + * + * Renders a footer with copyright and nav; + */ +const Footer: VFC<FooterProps> = ({ + className, + copyright, + navItems, + topId, +}) => { + return ( + <footer className={`${styles.wrapper} ${className}`}> + <Copyright + dates={copyright.dates} + owner={copyright.owner} + icon={copyright.icon} + /> + {navItems && ( + <Nav kind="footer" items={navItems} className={styles.nav} /> + )} + <BackToTop target={topId} className={styles['back-to-top']} /> + </footer> + ); +}; + +export default Footer; |
