61 lines
1.3 KiB
TypeScript
61 lines
1.3 KiB
TypeScript
import { useWindowDimension } from "hooks/useWindowDimension";
|
|
import React, { CSSProperties, useEffect, useState } from "react";
|
|
|
|
import { Image } from "./Image";
|
|
|
|
import styles from "./ShapesBackground.module.css";
|
|
|
|
interface Props {
|
|
getConfig?: GetShapesConfig;
|
|
}
|
|
|
|
export function ShapesBackground({ getConfig }: Props) {
|
|
const [config, setConfig] = useState<ShapesConfig>({});
|
|
const { width, height } = useWindowDimension();
|
|
|
|
useEffect(() => {
|
|
setConfig(getConfig?.() ?? {});
|
|
}, [getConfig, width, height]);
|
|
|
|
return (
|
|
<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>
|
|
);
|
|
}
|
|
|
|
export type ShapeType =
|
|
| "asterisk"
|
|
| "circle"
|
|
| "cross"
|
|
| "dots"
|
|
| "hash"
|
|
| "plus"
|
|
| "ring"
|
|
| "triangle"
|
|
| "waves";
|
|
|
|
export type ShapesConfig = {
|
|
[key in ShapeType]?: CSSProperties[];
|
|
};
|
|
|
|
export type GetShapesConfig = () => ShapesConfig;
|
|
|
|
function Shape(props: { type: ShapeType; style: CSSProperties }) {
|
|
return (
|
|
<Image
|
|
src={`/images/shapes/${props.type}.svg`}
|
|
className={styles.shape}
|
|
style={props.style}
|
|
/>
|
|
);
|
|
}
|