web/components/TempDesignSystem/Text/Title/index.tsx

import { Children } from "react"

import { headingVariants } from "./variants"

import type { HeadingProps } from "./title"

export default function Title({
  as,
  children,
  className = "",
  color,
  level = "h1",
  textAlign,
  textTransform,
}: HeadingProps) {
  if (Children.toArray(children).length === 0) {
    return null
  }
  const Hx = level
  const classNames = headingVariants({
    className,
    color,
    textAlign,
    textTransform,
    type: as ?? level,
  })
  return <Hx className={classNames}>{children}</Hx>
}