Function Heading

apps/baseai.dev/src/components/Heading.tsx:71–138

({
	children,
	tag,
	label,
	level,
	anchor = true,
	...props
}: React.ComponentPropsWithoutRef<`h${Level}`> & {
	id: string;
	tag?: string;
	label?: string;
	level?: Level;
	anchor?: boolean;
})

}

export function Heading<Level extends 2 | 3>({
	children,
	tag,
	label,
	level,
	anchor = true,
	...props
}: React.ComponentPropsWithoutRef<`h${Level}`> & {
	id: string;
	tag?: string;
	label?: string;
	level?: Level;
	anchor?: boolean;
}) {
	level = level ?? (2 as Level);
	let Component = `h${level}` as 'h2' | 'h3';
	let ref = useRef<HTMLHeadingElement>(null);
	let registerHeading = useSectionStore(s => s.registerHeading);

	let inView = useInView(ref, {
		margin: `${remToPx(-3.5)}px 0px 0px 0px`,
		amount: 'all'
	});

	const stepPattern = /^Step\s*#?\s*(\d+)(?:\s*:\s*)?(.*)$/i;
	const textOnlyHeading = typeof children === 'string';
	const hasSteps = textOnlyHeading ? children.match(stepPattern) : null;
	const stepNumber = hasSteps && hasSteps[1];
	const title = hasSteps ? hasSteps[2] : children;

	useEffect(() => {
		if (level === 2) {
			registerHeading({
				id: props.id,
				ref,
				offsetRem: tag || label ? 8 : 6
			});
		}
	});

	return (
		<>
			<Eyebrow tag={tag} label={label} />
			<Component
				ref={ref}
				className={
					tag || label
						? 'relative mt-2 scroll-mt-32'
						: 'relative scroll-mt-24'
				}
				{...props}
			>
				{!anchor && (
					<>
						<Step stepNumber={stepNumber} />
						{title}
					</>
				)}