import React from "react"; import { lowerDash } from "../helpers/utilities" export const Section = ({ children, background = { fillStyles: "", src: "", position: "center", ornaments: [] }, navigationLabel = "", className = "", }) => { const sectionId = navigationLabel ? { id: lowerDash(navigationLabel) } : {} return (
{background?.src && background image}
{background?.ornaments?.length > 0 &&
{background.ornaments.map(function (ornament, index) { const wrapStyle = { transform: `translate(${ornament.xOffset || 0}px,${ornament.yOffset || 0}px)`, }; const anchorPosition = { "center": "top-1/2 left-1/2", "top": "top-0 left-1/2", "top-right": "top-0 right-0", "right": "top-1/2 right-0", "bottom-right": "bottom-0 right-0", "bottom": "bottom-0 left-1/2", "bottom-left": "left-0 bottom-0", "left": "top-1/2 left-0", "top-left": "top-0 left-0", }; const alignmentTransform = { "center": "-50%,-50%", "top": "-50%,0", "top-right": "-100%,0", "right": "-100%,-50%", "bottom-right": "-100%,-100%", "bottom": "-50%,-100%", "bottom-left": "0,-100%", "left": "0,-50%", "top-left": "0,0" }; const imgStyle = { width: `${ornament.width}px`, height: `${ornament.height}px`, transform: `translate(${alignmentTransform[ornament.alignment]})`, maxWidth: "none" }; const element = (
) return element })}
} {children}
); };