yaak-mountain-loop/packages/ui/src/components/Heading.tsx

import classNames from "classnames";
import type { HTMLAttributes } from "react";

interface Props extends HTMLAttributes<HTMLHeadingElement> {
  level?: 1 | 2 | 3;
}

export function Heading({ className, level = 1, ...props }: Props) {
  const Component = level === 1 ? "h1" : level === 2 ? "h2" : "h3";
  return (
    <Component
      className={classNames(
        className,
        "font-semibold text-text",
        level === 1 && "text-2xl",
        level === 2 && "text-xl",
        level === 3 && "text-lg",
      )}
      {...props}
    />
  );
}