3693495dd0
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Use mainwhite.svg on white sections with curvy green transitions into flat green bands, improve text and button contrast, and deploy via OpenNext on Cloudflare Workers. Co-authored-by: Cursor <cursoragent@cursor.com>
57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import {
|
|
getAssetForTone,
|
|
MAIN_WHITE_PATTERN_SRC,
|
|
type TopoPatternId,
|
|
type TopoSectionTone,
|
|
resolveTopoPattern,
|
|
} from "@/content/topo-patterns";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
export type TopoTextClearance = "section" | "header" | "none";
|
|
|
|
type Props = {
|
|
pattern?: TopoPatternId;
|
|
opacity?: number;
|
|
tone?: TopoSectionTone;
|
|
textClearance?: TopoTextClearance;
|
|
className?: string;
|
|
};
|
|
|
|
/** mainwhite.svg on white sections only */
|
|
export function TopographicPattern({
|
|
pattern = "topo-main",
|
|
opacity,
|
|
tone = "light",
|
|
className,
|
|
}: Props) {
|
|
const id = resolveTopoPattern(pattern);
|
|
if (!id || tone === "green") return null;
|
|
|
|
const asset = getAssetForTone("light");
|
|
const layerOpacity = opacity ?? asset.defaultOpacity;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"topo-pattern-bg topo-tone-light pointer-events-none absolute inset-0 z-0 overflow-hidden",
|
|
className
|
|
)}
|
|
data-topo-tone="light"
|
|
data-pattern-src={MAIN_WHITE_PATTERN_SRC}
|
|
aria-hidden
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
src={MAIN_WHITE_PATTERN_SRC}
|
|
alt=""
|
|
className="topo-pattern-asset block h-full w-full object-cover"
|
|
style={{
|
|
opacity: layerOpacity,
|
|
objectPosition: asset.positions[0],
|
|
}}
|
|
draggable={false}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|