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

import { Slot } from "@radix-ui/react-slot"
import { Children } from "react"

import { subtitleVariants } from "./variants"

import type { SubtitleProps } from "./subtitle"

export default function Subtitle({
  asChild = false,
  className = "",
  color,
  textAlign,
  textTransform,
  ...props
}: SubtitleProps) {
  if (Children.toArray(props.children).length === 0) {
    return null
  }
  const Comp = asChild ? Slot : "p"
  const classNames = subtitleVariants({
    className,
    color,
    textAlign,
    textTransform,
  })
  return <Comp className={classNames} {...props} />
}