frontpage/components/Blog/Layout.tsx

45 lines
1.7 KiB
TypeScript
Raw Normal View History

2022-10-07 23:36:57 +02:00
import type { NextPage } from "next";
import Head from "next/head";
import Navigation from "./Navigation";
2022-10-15 22:21:58 +02:00
import styles from "../../styles/Blog/Blog.module.scss";
2022-10-29 22:06:49 +02:00
import socials from "../../data/socials";
2022-10-07 23:36:57 +02:00
interface ILayoutProps {
title?: string;
}
const Layout: NextPage<ILayoutProps> = ({ title, children }) => {
2022-10-30 13:31:06 +01:00
const socialLinks = socials("1.1em").map((social, i) => <a key={i} href={social.url} target="_blank" rel="noreferrer" className={styles.socialIcon}>{social.icon}</a>);
2022-10-07 23:36:57 +02:00
return <>
<Head>
<title>{title ?? "c0ntroller.de"}</title>
</Head>
2022-10-15 22:21:58 +02:00
<div id={styles.blogBody}>
2022-10-29 22:06:49 +02:00
<span id="top" aria-hidden></span>
<header>
2022-10-07 23:36:57 +02:00
<Navigation />
</header>
<main>
{ children }
</main>
2022-10-29 21:13:28 +02:00
<footer id="bottom">
2022-10-29 22:06:49 +02:00
<span style={{visibility: "hidden"}}></span>
<span className={styles.spacer}></span>
<span className={styles.footerContent}>
<span>© 2022 Daniel Kluge</span>
<span className={styles.divider}>|</span>
2022-10-30 13:31:06 +01:00
{socialLinks.flatMap((social, i) => i !== 0 ? [<span className={styles.divider} key={`d${i}`}>|</span>, social] : [social])}
2022-10-29 22:06:49 +02:00
<span className={styles.divider}>|</span>
<a className="nostyle" target="_blank" href="mailto:admin-website@c0ntroller.de" rel="noreferrer">Contact</a>
</span>
<span className={styles.spacer}></span>
<a className="nostyle" href="#top" title="Back to top"></a>
2022-10-15 23:08:49 +02:00
</footer>
2022-10-07 23:36:57 +02:00
</div>
</>;
};
export default Layout;