Function Step

apps/baseai.dev/src/components/Heading.tsx:140–150

({ stepNumber }: { stepNumber: string | null })

}

function Step({ stepNumber }: { stepNumber: string | null }) {
	if (!stepNumber) return <></>;
	return (
		<span className="relative left-12 right-0 top-0 mb-2 ml-0 flex -translate-x-[calc(91%)] transform justify-end rounded-lg bg-background px-4 py-2 font-mono text-xs uppercase leading-tight shadow md:left-0 3xl:absolute 3xl:w-full 3xl:-translate-x-[calc(100%+3vw)] 3xl:justify-end 3xl:rounded-r-lg">
			<span className="flex">
				Step <span className="ml-1 text-muted-foreground/80">#</span>
				{stepNumber}
			</span>
		</span>
	);
}