jake/jarv.is
1
Fork 0
mirror of https://github.com/jakejarvis/jarv.is.git synced 2025-06-30 22:46:39 -04:00
Code Issues Activity

CSS modules ➡️ Stitches 🧵 (#799)

Browse Source
This commit is contained in:
Jake Jarvis
2022-03-03 09:18:26 -05:00
committed by GitHub
parent ac7ac71c10
commit c2dde042b7
93 changed files with 2392 additions and 3000 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
components/Layout/Layout.tsx
View File

@ -1,41 +1,66 @@
import Head from "next/head";
import { useTheme } from "next-themes";
import classNames from "classnames";
import Header from "../Header/Header";
import Footer from "../Footer/Footer";
import themes from "../../lib/config/themes";
import { styled, theme, darkTheme } from "../../lib/styles/stitches.config";
import type { ComponentProps } from "react";
import styles from "./Layout.module.css";
const Flex = styled("div", {
display: "flex",
flexDirection: "column",
minHeight: "100vh",
});
export type LayoutProps = JSX.IntrinsicElements["div"] & {
const Default = styled("main", {
width: "100%",
padding: "1.5em",
});
const Container = styled("div", {
maxWidth: "865px",
margin: "0 auto",
display: "block",
});
// footer needs to fill the remaining vertical screen space. doing it here to keep flex stuff together.
const FlexedFooter = styled(Footer, {
flex: 1,
});
export type LayoutProps = ComponentProps<typeof Flex> & {
container?: boolean; // pass false to disable default `<main>` container styles with padding, etc.
stickyHeader?: boolean; // pass false to override default stickiness of header when scrolling
};
const Layout = ({ container = true, stickyHeader = true, className, children, ...rest }: LayoutProps) => {
const Layout = ({ container = true, stickyHeader = true, children, ...rest }: LayoutProps) => {
const { resolvedTheme } = useTheme();
return (
<>
<Head>
{/* dynamically set browser theme color to match the background color; default to light for SSR */}
<meta name="theme-color" content={themes[resolvedTheme || "light"].backgroundOuter} />
<meta
name="theme-color"
content={
resolvedTheme === "dark" ? darkTheme.colors.backgroundOuter.value : theme.colors.backgroundOuter.value
}
/>
</Head>
<div className={classNames(styles.flex, className)} {...rest}>
<Flex {...rest}>
<Header sticky={stickyHeader} />
{/* passing `container={false}` to Layout allows 100% control of the content area on a per-page basis */}
{container ? (
<main className={styles.default}>
<div className={styles.container}>{children}</div>
</main>
<Default>
<Container>{children}</Container>
</Default>
) : (
<>{children}</>
)}
<Footer className={styles.footer} />
</div>
<FlexedFooter />
</Flex>
</>
);
};