86 lines
1.9 KiB
TypeScript
86 lines
1.9 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.teal} ${styles.opacity25} ${styles.homeDots}`}
|
|
/>
|
|
<Shape
|
|
shape="hash"
|
|
className={`${styles.blue} ${styles.opacity20} ${styles.homeHash1}`}
|
|
/>
|
|
<Shape
|
|
shape="triangle"
|
|
className={`${styles.teal} ${styles.opacity30} ${styles.homeTriangle1}`}
|
|
/>
|
|
<Shape
|
|
shape="waves"
|
|
className={`${styles.teal} ${styles.opacity20} ${styles.homeWaves1}`}
|
|
/>
|
|
<Shape
|
|
shape="triangle"
|
|
className={`${styles.blue} ${styles.opacity20} ${styles.homeTriangle2}`}
|
|
/>
|
|
<Shape
|
|
shape="plus"
|
|
className={`${styles.blue} ${styles.opacity20} ${styles.homePlus}`}
|
|
/>
|
|
<Shape
|
|
shape="waves"
|
|
className={`${styles.teal} ${styles.opacity20} ${styles.homeWaves2}`}
|
|
/>
|
|
<Shape
|
|
shape="hash"
|
|
className={`${styles.blue} ${styles.opacity20} ${styles.homeHash2}`}
|
|
/>
|
|
</>
|
|
);
|
|
}
|