1a710aa3c6
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
134 lines
3.3 KiB
TypeScript
134 lines
3.3 KiB
TypeScript
import type { RiftPattern } from "@/components/brand/rift-patterns";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
pattern: RiftPattern;
|
|
inverse?: boolean;
|
|
};
|
|
|
|
/** Light section-local accent — does not compete with page spine */
|
|
export function RiftSectionAccent({ pattern, inverse }: Props) {
|
|
if (pattern === "none") return null;
|
|
|
|
const mainStroke = inverse ? "rgba(255,255,255,0.25)" : "rgba(26,92,56,0.2)";
|
|
const softStroke = inverse ? "rgba(255,255,255,0.12)" : "rgba(26,92,56,0.1)";
|
|
|
|
if (pattern === "whisper") {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"pointer-events-none absolute inset-x-0 top-0 z-0 mx-auto h-px max-w-4xl",
|
|
inverse
|
|
? "bg-gradient-to-r from-transparent via-white/25 to-transparent"
|
|
: "bg-gradient-to-r from-transparent via-[#1a5c38]/15 to-transparent"
|
|
)}
|
|
aria-hidden
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (pattern === "vein-left") {
|
|
return (
|
|
<svg
|
|
className="pointer-events-none absolute bottom-0 left-2 top-12 z-0 w-10 md:left-6 md:w-14"
|
|
viewBox="0 0 64 400"
|
|
preserveAspectRatio="none"
|
|
aria-hidden
|
|
>
|
|
<path
|
|
d="M32 0 C20 80, 44 160, 30 240 S16 320, 34 400"
|
|
fill="none"
|
|
stroke={mainStroke}
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
if (pattern === "vein-right") {
|
|
return (
|
|
<svg
|
|
className="pointer-events-none absolute bottom-0 right-2 top-12 z-0 w-10 md:right-6 md:w-14"
|
|
viewBox="0 0 64 400"
|
|
preserveAspectRatio="none"
|
|
aria-hidden
|
|
>
|
|
<path
|
|
d="M32 0 C44 100, 18 200, 36 300 S48 360, 30 400"
|
|
fill="none"
|
|
stroke={mainStroke}
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
if (pattern === "arc-top") {
|
|
return (
|
|
<svg
|
|
className="pointer-events-none absolute inset-x-0 top-0 z-0 h-12 w-full md:h-16"
|
|
viewBox="0 0 1200 64"
|
|
preserveAspectRatio="none"
|
|
aria-hidden
|
|
>
|
|
<path
|
|
d="M0 48 Q300 8 600 32 T1200 40"
|
|
fill="none"
|
|
stroke={mainStroke}
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
/>
|
|
<path
|
|
d="M0 56 Q400 24 800 44 T1200 52"
|
|
fill="none"
|
|
stroke={softStroke}
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
if (pattern === "arc-bottom") {
|
|
return (
|
|
<svg
|
|
className="pointer-events-none absolute inset-x-0 bottom-0 z-0 h-12 w-full md:h-16"
|
|
viewBox="0 0 1200 64"
|
|
preserveAspectRatio="none"
|
|
aria-hidden
|
|
>
|
|
<path
|
|
d="M0 16 Q350 52 700 28 T1200 24"
|
|
fill="none"
|
|
stroke={mainStroke}
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
if (pattern === "fork") {
|
|
return (
|
|
<svg
|
|
className="pointer-events-none absolute left-1/2 top-0 z-0 h-20 w-full max-w-2xl -translate-x-1/2 opacity-90"
|
|
viewBox="0 0 600 80"
|
|
preserveAspectRatio="xMidYMin meet"
|
|
aria-hidden
|
|
>
|
|
<path
|
|
d="M300 0 L300 36 M300 36 Q220 50 140 64 M300 36 Q380 50 460 64"
|
|
fill="none"
|
|
stroke={mainStroke}
|
|
strokeWidth="1"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|