Function ShapeSection

pwa/components/common/ShapeSection.tsx:30–50

({
  effect = "right-triangle",
  maskColor = "white",
  darkModeColor,
  className,
  children,
}: ShapeSectionProps)

]; // KEEP FOR TAILWIND PURGE

export default function ShapeSection({
  effect = "right-triangle",
  maskColor = "white",
  darkModeColor,
  className,
  children,
}: ShapeSectionProps) {
  const shapeClassName = classNames(
    `after:h-20 after:absolute after:-bottom-px after:left-0 after:w-full after:bg-${maskColor}`,
    effect === "right-triangle" && "after:clip-path-corner-right",
    effect === "left-triangle" && "after:clip-path-corner-left",
    effect === "center-triangle" && "after:clip-path-triangle-bottom",
    darkModeColor && `dark:after:bg-${darkModeColor}`
  );

  return (
    <div className={classNames("relative w-full", className, shapeClassName)}>
      {children}
    </div>
  );
}