45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
interface SectionDividerProps {
|
|
variant?: "gradient" | "pulse" | "waveform";
|
|
className?: string;
|
|
}
|
|
|
|
const PULSE_DOTS = ["dot-1", "dot-2", "dot-3", "dot-4", "dot-5"] as const;
|
|
|
|
export default function SectionDivider({
|
|
variant = "gradient",
|
|
className = "",
|
|
}: SectionDividerProps) {
|
|
const rootClassName =
|
|
`section-divider section-divider-${variant} ${className}`.trim();
|
|
|
|
if (variant === "gradient") {
|
|
return (
|
|
<div aria-hidden="true" className={rootClassName}>
|
|
<span />
|
|
<span />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (variant === "pulse") {
|
|
return (
|
|
<div aria-hidden="true" className={rootClassName}>
|
|
{PULSE_DOTS.map((dot) => (
|
|
<span key={dot} />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div aria-hidden="true" className={rootClassName}>
|
|
<svg viewBox="0 0 1200 60" preserveAspectRatio="none" focusable="false">
|
|
<title>Divisor decorativo</title>
|
|
<path d="M0 30 C100 8 180 52 280 30 S460 8 560 30 740 52 840 30 1020 8 1200 30" />
|
|
<path d="M0 30 C120 48 220 12 340 30 S560 48 680 30 900 12 1020 30 1140 48 1200 30" />
|
|
<path d="M0 30 C80 20 160 40 240 30 S400 20 480 30 640 40 720 30 880 20 960 30 1120 40 1200 30" />
|
|
</svg>
|
|
</div>
|
|
);
|
|
}
|