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