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>
38 lines
882 B
TypeScript
38 lines
882 B
TypeScript
"use client";
|
|
|
|
import type { ElementType, ReactNode } from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import type { TopoSectionTone } from "@/content/topo-patterns";
|
|
import { useTopoSectionTone } from "@/components/layout/TopoSectionContext";
|
|
|
|
type Props = {
|
|
children: ReactNode;
|
|
className?: string;
|
|
tone?: TopoSectionTone;
|
|
as?: ElementType;
|
|
};
|
|
|
|
/** Readable backdrop for large text blocks over the topo pattern */
|
|
export function TopoProseSurface({
|
|
children,
|
|
className,
|
|
tone,
|
|
as: Tag = "div",
|
|
}: Props) {
|
|
const sectionTone = useTopoSectionTone();
|
|
const resolved = tone ?? sectionTone;
|
|
|
|
return (
|
|
<Tag
|
|
className={cn(
|
|
"topo-prose-surface relative z-[15]",
|
|
resolved === "light" && "topo-prose-surface-light",
|
|
resolved === "green" && "topo-prose-surface-green",
|
|
className
|
|
)}
|
|
>
|
|
{children}
|
|
</Tag>
|
|
);
|
|
}
|