38 lines
897 B
TypeScript
38 lines
897 B
TypeScript
/**
|
|
* Decorative wave SVG between sections.
|
|
* `flip` mirrors the wave vertically.
|
|
* `fromColor` and `toColor` set the CSS fill accordingly.
|
|
*/
|
|
|
|
type WaveDividerProps = {
|
|
/** Fill color — use CSS variable or tailwind class value */
|
|
fill?: string;
|
|
/** Flip vertically (place at bottom of a dark section going to light) */
|
|
flip?: boolean;
|
|
className?: string;
|
|
};
|
|
|
|
export function WaveDivider({
|
|
fill = "var(--background)",
|
|
flip = false,
|
|
className = "",
|
|
}: WaveDividerProps) {
|
|
return (
|
|
<div
|
|
className={`section-divider ${className}`}
|
|
style={{ transform: flip ? "rotate(180deg)" : undefined }}
|
|
>
|
|
<svg
|
|
viewBox="0 0 1440 58"
|
|
preserveAspectRatio="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M0,0 C360,58 1080,0 1440,44 L1440,58 L0,58 Z"
|
|
fill={fill}
|
|
/>
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|