Refactor shapes background pipeline
This commit is contained in:
parent
c2e6078dff
commit
da19ce8f01
|
@ -1,31 +1,36 @@
|
||||||
import { useRouter } from "next/router";
|
import React, { CSSProperties, useEffect, useState } from "react";
|
||||||
import React from "react";
|
|
||||||
|
|
||||||
import { Image } from "./Image";
|
import { Image } from "./Image";
|
||||||
|
|
||||||
import styles from "./ShapesBackground.module.css";
|
import styles from "./ShapesBackground.module.css";
|
||||||
|
|
||||||
export function ShapesBackground(props: { children: React.ReactNode }) {
|
interface Props {
|
||||||
const router = useRouter();
|
getConfig?: GetShapesConfig;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function ShapesBackground({ getConfig }: Props) {
|
||||||
|
const [config, setConfig] = useState<ShapesConfig>({});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setConfig(getConfig?.() ?? {});
|
||||||
|
}, [getConfig]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className={styles.shapesContainer}>
|
||||||
<div className={styles.shapesContainer}>
|
{Object.entries(config).map(([type, instances]) =>
|
||||||
{routeList.find((el) => router.pathname === el.route)?.shapes() ?? null}
|
instances.map((attributes, idx) => (
|
||||||
</div>
|
<Shape
|
||||||
{props.children}
|
key={idx.toString() + type}
|
||||||
</>
|
type={type as ShapeType}
|
||||||
|
style={attributes}
|
||||||
|
/>
|
||||||
|
))
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const routeList = [
|
export type ShapeType =
|
||||||
{
|
|
||||||
route: "/",
|
|
||||||
shapes: HomeShapes,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
type ShapeType =
|
|
||||||
| "asterisk"
|
| "asterisk"
|
||||||
| "circle"
|
| "circle"
|
||||||
| "cross"
|
| "cross"
|
||||||
|
@ -36,26 +41,33 @@ type ShapeType =
|
||||||
| "triangle"
|
| "triangle"
|
||||||
| "waves";
|
| "waves";
|
||||||
|
|
||||||
function Shape(props: { shape: ShapeType; className: string }) {
|
export type ShapesConfig = {
|
||||||
|
[key in ShapeType]?: CSSProperties[];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type GetShapesConfig = () => ShapesConfig;
|
||||||
|
|
||||||
|
function Shape(props: { type: ShapeType; style: CSSProperties }) {
|
||||||
return (
|
return (
|
||||||
<Image
|
<Image
|
||||||
src={`/images/shapes/${props.shape}.svg`}
|
src={`/images/shapes/${props.type}.svg`}
|
||||||
className={`${styles.shape} ${props.className}`}
|
className={styles.shape}
|
||||||
|
style={props.style}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function HomeShapes() {
|
// function HomeShapes() {
|
||||||
return (
|
// return (
|
||||||
<>
|
// <>
|
||||||
<Shape shape="dots" className={styles.homeDots} />
|
// <Shape type="dots" className={styles.homeDots} />
|
||||||
<Shape shape="hash" className={styles.homeHash1} />
|
// <Shape type="hash" className={styles.homeHash1} />
|
||||||
<Shape shape="triangle" className={styles.homeTriangle1} />
|
// <Shape type="triangle" className={styles.homeTriangle1} />
|
||||||
<Shape shape="waves" className={styles.homeWaves1} />
|
// <Shape type="waves" className={styles.homeWaves1} />
|
||||||
<Shape shape="triangle" className={styles.homeTriangle2} />
|
// <Shape type="triangle" className={styles.homeTriangle2} />
|
||||||
<Shape shape="plus" className={styles.homePlus} />
|
// <Shape type="plus" className={styles.homePlus} />
|
||||||
<Shape shape="waves" className={styles.homeWaves2} />
|
// <Shape type="waves" className={styles.homeWaves2} />
|
||||||
<Shape shape="hash" className={styles.homeHash2} />
|
// <Shape type="hash" className={styles.homeHash2} />
|
||||||
</>
|
// </>
|
||||||
);
|
// );
|
||||||
}
|
// }
|
||||||
|
|
|
@ -7,7 +7,10 @@ import { DefaultLayout } from "@/components/DefaultLayout";
|
||||||
import { Footer } from "@/components/Footer";
|
import { Footer } from "@/components/Footer";
|
||||||
import { Link } from "@/components/Link";
|
import { Link } from "@/components/Link";
|
||||||
import { Navbar } from "@/components/Navbar";
|
import { Navbar } from "@/components/Navbar";
|
||||||
import { ShapesBackground } from "@/components/ShapesBackground";
|
import {
|
||||||
|
GetShapesConfig,
|
||||||
|
ShapesBackground,
|
||||||
|
} from "@/components/ShapesBackground";
|
||||||
import { ThemeProvider } from "@/components/Theme";
|
import { ThemeProvider } from "@/components/Theme";
|
||||||
|
|
||||||
import styles from "./_app.module.css";
|
import styles from "./_app.module.css";
|
||||||
|
@ -25,11 +28,12 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
|
||||||
<Navbar />
|
<Navbar />
|
||||||
{/* Wrapping content with a div to allow for a display: block parent */}
|
{/* Wrapping content with a div to allow for a display: block parent */}
|
||||||
<div className={styles.contentContainer}>
|
<div className={styles.contentContainer}>
|
||||||
<ShapesBackground>
|
<ShapesBackground
|
||||||
<Layout>
|
getConfig={Component.getShapesConfig ?? undefined}
|
||||||
<Component {...pageProps} />
|
/>
|
||||||
</Layout>
|
<Layout>
|
||||||
</ShapesBackground>
|
<Component {...pageProps} />
|
||||||
|
</Layout>
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
|
@ -44,6 +48,7 @@ type PageComponent = NextComponentType<
|
||||||
Record<string, unknown>
|
Record<string, unknown>
|
||||||
> & {
|
> & {
|
||||||
Layout?: ComponentType<{ children: ReactNode }>;
|
Layout?: ComponentType<{ children: ReactNode }>;
|
||||||
|
getShapesConfig?: GetShapesConfig;
|
||||||
};
|
};
|
||||||
|
|
||||||
type AppProps = DefaultAppProps & {
|
type AppProps = DefaultAppProps & {
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { EmailSignup } from "@/components/EmailSignup";
|
||||||
import { EventDescriptionCard } from "@/components/EventDescriptionCard";
|
import { EventDescriptionCard } from "@/components/EventDescriptionCard";
|
||||||
import { Image } from "@/components/Image";
|
import { Image } from "@/components/Image";
|
||||||
import { NewsCard } from "@/components/NewsCard";
|
import { NewsCard } from "@/components/NewsCard";
|
||||||
|
import { GetShapesConfig } from "@/components/ShapesBackground";
|
||||||
import { SocialLinks } from "@/components/SocialLinks";
|
import { SocialLinks } from "@/components/SocialLinks";
|
||||||
|
|
||||||
import AltTab, {
|
import AltTab, {
|
||||||
|
@ -92,3 +93,10 @@ export default function Home() {
|
||||||
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
|
Home.Layout = function HomeLayout(props: { children: React.ReactNode }) {
|
||||||
return <div className={styles.page}>{props.children}</div>;
|
return <div className={styles.page}>{props.children}</div>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Home.getShapesConfig = (() => {
|
||||||
|
return {
|
||||||
|
triangle: [{ left: "2rem" }, { bottom: "2rem" }],
|
||||||
|
dots: [{ top: "100px", right: "50vw" }],
|
||||||
|
};
|
||||||
|
}) as GetShapesConfig;
|
||||||
|
|
Loading…
Reference in New Issue