Heading Component

heading.tsx

interface HeadingProps {
  children: React.ReactNode
}

import { Slot } from '@radix-ui/react-slot'
import {cva, type VariantProps} from 'class-variance-authority'
import { cn } from "@/lib/utils"
import React from 'react'

const headingVariants = cva(
  'scroll-m-20 tracking-tight',
  {
    variants: {
      variant: {
        h1: 'text-4xl font-extrabold lg:text-5xl',
        h2: 'border-b pb-2 text-3xl font-semibold transition-colors first:mt-0',
        h3: 'text-2xl font-semibold',
        h4: 'text-xl font-semibold'
      }
    },
    defaultVariants: {
      variant: 'h1'
    }
  }
)

interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
  asChild?: boolean
}

const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
  ({ className, variant, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : 'h1' 
    return (
      <Comp
        className={cn(headingVariants({ variant, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Heading.displayName = 'Heading'

export { Heading, headingVariants }