48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
import { cn } from "@/lib/utils";
|
||
|
||
export interface NumeralProps {
|
||
/** „01“ */
|
||
value: string;
|
||
/**
|
||
* Ground the numeral sits on. Omit to resolve it from the nearest
|
||
* `[data-theme]` ancestor (CSS only): `.gold-text` on dark, flat `--gold-700` on light.
|
||
*/
|
||
theme?: "dark" | "light";
|
||
/** `position: sticky; top: calc(50vh − .45em)` (desktop). Default true. */
|
||
sticky?: boolean;
|
||
className?: string;
|
||
}
|
||
|
||
const GOLD_TEXT_DARK =
|
||
"[[data-theme=dark]_&]:bg-[image:var(--gold-gradient-text)] [[data-theme=dark]_&]:bg-clip-text [[data-theme=dark]_&]:text-gold [[data-theme=dark]_&]:[-webkit-text-fill-color:transparent]";
|
||
|
||
/**
|
||
* Section numeral: Playfair 400, `clamp(4rem, 2rem + 8vw, 10rem)`,
|
||
* lining numerals. Decorative – the accessible section number lives in the
|
||
* Section's mono meta line, so this is `aria-hidden`.
|
||
*/
|
||
export function Numeral({ value, theme, sticky = true, className }: NumeralProps) {
|
||
const colour =
|
||
theme === "dark"
|
||
? "gold-text"
|
||
: theme === "light"
|
||
? "text-gold-700"
|
||
: cn("text-gold-700", GOLD_TEXT_DARK);
|
||
|
||
return (
|
||
<span
|
||
aria-hidden="true"
|
||
className={cn(
|
||
"block select-none font-display text-[clamp(4rem,2rem+8vw,10rem)] font-normal leading-[0.9] tracking-[-0.01em] [font-variant-numeric:lining-nums]",
|
||
sticky && "lg:sticky lg:top-[calc(50vh_-_0.45em)]",
|
||
colour,
|
||
className,
|
||
)}
|
||
>
|
||
{value}
|
||
</span>
|
||
);
|
||
}
|
||
|
||
export default Numeral;
|