62 lines
1.4 KiB
TypeScript
62 lines
1.4 KiB
TypeScript
import { useRouter } from "next/router";
|
|
import React from "react";
|
|
|
|
import { Image } from "./Image";
|
|
|
|
import styles from "./ShapesBackground.module.css";
|
|
|
|
export function ShapesBackground(props: { children: React.ReactNode }) {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.shapesContainer}>
|
|
{routeList.find((el) => router.pathname === el.route)?.shapes() ?? null}
|
|
</div>
|
|
{props.children}
|
|
</>
|
|
);
|
|
}
|
|
|
|
const routeList = [
|
|
{
|
|
route: "/",
|
|
shapes: HomeShapes,
|
|
},
|
|
];
|
|
|
|
type ShapeType =
|
|
| "asterisk"
|
|
| "circle"
|
|
| "cross"
|
|
| "dots"
|
|
| "hash"
|
|
| "plus"
|
|
| "ring"
|
|
| "triangle"
|
|
| "waves";
|
|
|
|
function Shape(props: { shape: ShapeType; className: string }) {
|
|
return (
|
|
<Image
|
|
src={`/images/shapes/${props.shape}.svg`}
|
|
className={`${styles.shape} ${props.className}`}
|
|
/>
|
|
);
|
|
}
|
|
|
|
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} />
|
|
</>
|
|
);
|
|
}
|