74 lines
1.7 KiB
TypeScript
74 lines
1.7 KiB
TypeScript
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>({});
|
|
|
|
useEffect(() => {
|
|
setConfig(getConfig?.() ?? {});
|
|
}, [getConfig]);
|
|
|
|
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}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// 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} />
|
|
// </>
|
|
// );
|
|
// }
|