122 lines
2.5 KiB
TypeScript
122 lines
2.5 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"
|
|
| "triangleBig"
|
|
| "waves"
|
|
| "waveBig";
|
|
|
|
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}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// Used for most mobile pages
|
|
export const mobileShapesConfig = {
|
|
dots: [
|
|
{
|
|
top: "calc(-6rem / 16)",
|
|
left: "calc(-95rem / 16)",
|
|
width: "calc(166rem / 16)",
|
|
height: "calc(150rem / 16)",
|
|
},
|
|
],
|
|
hash: [
|
|
{
|
|
top: "calc(88rem / 16)",
|
|
right: "15vw",
|
|
width: "calc(40rem / 16)",
|
|
height: "calc(40rem / 16)",
|
|
},
|
|
],
|
|
triangle: [
|
|
{
|
|
top: "calc(20rem / 16)",
|
|
right: "1vw",
|
|
width: "calc(45rem / 16)",
|
|
height: "calc(45rem / 16)",
|
|
transform: "rotate(17deg)",
|
|
},
|
|
],
|
|
};
|
|
|
|
// Used for Constitution, Code of Conduct, and Our Supporters desktop pages
|
|
export const aboutShapesConfig = {
|
|
cross: [
|
|
{
|
|
top: "calc(400rem / 16)",
|
|
right: "90vw",
|
|
width: "calc(225rem / 16)",
|
|
height: "calc(225rem / 16)",
|
|
transform: "rotate(30deg)",
|
|
},
|
|
],
|
|
triangleBig: [
|
|
{
|
|
bottom: "calc(120rem / 16)",
|
|
left: "91vw",
|
|
width: "calc(138rem / 16)",
|
|
height: "calc(138rem / 16)",
|
|
transform: "rotate(-25deg)",
|
|
},
|
|
],
|
|
wavesBig: [
|
|
{
|
|
top: "calc(-32rem / 16)",
|
|
left: "88vw",
|
|
width: "calc(296rem / 16)",
|
|
height: "calc(254rem / 16)",
|
|
},
|
|
],
|
|
};
|