brackt/app/components/ui/BracktGradients.tsx

23 lines
953 B
TypeScript

import { BRACKT_GRADIENT_START, BRACKT_GRADIENT_END } from "~/lib/brand";
/**
* Renders hidden SVG gradient definitions that can be referenced by ID
* anywhere in the document via stroke="url(#brackt-primary-gradient)" etc.
*
* Mount this once near the root of the app.
*/
export function BracktGradients() {
return (
<svg width="0" height="0" aria-hidden className="absolute">
<defs>
{/* Green (top) → Cyan (bottom) — the main Brackt brand gradient.
userSpaceOnUse + 0→24 matches the Lucide icon viewBox so horizontal
strokes (zero bounding-box height) don't produce a degenerate gradient. */}
<linearGradient id="brackt-primary-gradient" x1="0" y1="0" x2="0" y2="24" gradientUnits="userSpaceOnUse">
<stop offset="0%" stopColor={BRACKT_GRADIENT_START} />
<stop offset="100%" stopColor={BRACKT_GRADIENT_END} />
</linearGradient>
</defs>
</svg>
);
}