58 lines
2.4 KiB
JavaScript
58 lines
2.4 KiB
JavaScript
const Section = ({
|
|
className,
|
|
crosses,
|
|
crossesOffset,
|
|
customPaddings,
|
|
children,
|
|
}) => (
|
|
<div
|
|
className={`relative ${
|
|
customPaddings ||
|
|
`py-10 lg:py-16 xl:py-20 ${crosses ? "lg:py-32 xl:py-40" : ""}`
|
|
} ${className || ""}`}
|
|
>
|
|
{children}
|
|
<div className="hidden absolute top-0 left-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:left-7.5 xl:left-10"></div>
|
|
<div className="hidden absolute top-0 right-5 w-0.25 h-full bg-stroke-1 pointer-events-none md:block lg:right-7.5 xl:right-10"></div>
|
|
{crosses && (
|
|
<>
|
|
<div
|
|
className={`hidden absolute top-0 left-7.5 right-7.5 h-0.25 bg-stroke-1 ${
|
|
crossesOffset && crossesOffset
|
|
} pointer-events-none lg:block xl:left-10 right-10`}
|
|
></div>
|
|
<svg
|
|
className={`hidden absolute -top-[0.3125rem] left-[1.5625rem] ${
|
|
crossesOffset && crossesOffset
|
|
} pointer-events-none lg:block xl:left-[2.1875rem]`}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="11"
|
|
height="11"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z"
|
|
fill="#ada8c4"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
className={`hidden absolute -top-[0.3125rem] right-[1.5625rem] ${
|
|
crossesOffset && crossesOffset
|
|
} pointer-events-none lg:block xl:right-[2.1875rem]`}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="11"
|
|
height="11"
|
|
fill="none"
|
|
>
|
|
<path
|
|
d="M7 1a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1v2a1 1 0 0 1-1 1H1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v2a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1V8a1 1 0 0 1 1-1h2a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1H8a1 1 0 0 1-1-1V1z"
|
|
fill="#ada8c4"
|
|
/>
|
|
</svg>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
export default Section;
|