next-mdx-remote v4 (#737)

2025-12-03 22:58:57 -05:00 · 2022-01-18 09:25:09 -05:00
parent 2ef5d06c38
commit a406010bd2
110 changed files with 1009 additions and 1490 deletions
--- a/components/Layout/Layout.module.css
+++ b/components/Layout/Layout.module.css
@@ -0,0 +1,18 @@
+.main {
+  width: 100%;
+  padding: 1.5em;
+  color: var(--text);
+  background-color: var(--background-inner);
+}
+
+.container {
+  max-width: 865px;
+  margin: 0 auto;
+  display: block;
+}
+
+@media screen and (max-width: 768px) {
+  .main {
+    padding: 1.25em;
+  }
+}
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -0,0 +1,34 @@
+import Head from "next/head";
+import { useTheme } from "next-themes";
+import Header from "../Header/Header";
+import Footer from "../Footer/Footer";
+import { themeColors } from "../../lib/config";
+import type { ReactNode } from "react";
+
+import styles from "./Layout.module.css";
+
+type Props = {
+  children: ReactNode;
+};
+
+const Layout = ({ children }: Props) => {
+  const { resolvedTheme } = useTheme();
+
+  return (
+    <>
+      {resolvedTheme && (
+        <Head>
+          <meta name="theme-color" content={themeColors[resolvedTheme]} />
+        </Head>
+      )}
+
+      <Header />
+      <main className={styles.main}>
+        <div className={styles.container}>{children}</div>
+      </main>
+      <Footer />
+    </>
+  );
+};
+
+export default Layout;