d6fe6a33b4
This is the foundation for the rate selection. Since we don't have UX and UI ready yet this is on a best effort basis. Things that will be changed later includes proper API fetching, correct design, internationalization of text and form handling.
35 lines
748 B
TypeScript
35 lines
748 B
TypeScript
import { checkForEmptyChildren } from "../../utils/checkForEmptyChildren"
|
|
import { headingVariants } from "./variants"
|
|
|
|
import type { HeadingProps } from "./title"
|
|
|
|
export default function Title({
|
|
/**
|
|
* What styling to use, based on heading level. If not provided `level`
|
|
* will determine the styling.
|
|
*/
|
|
as,
|
|
children,
|
|
className = "",
|
|
color,
|
|
/**
|
|
* What HTML tag to use. Defaults to h1.
|
|
*/
|
|
level = "h1",
|
|
textAlign,
|
|
textTransform,
|
|
}: HeadingProps) {
|
|
if (checkForEmptyChildren(children) === 0) {
|
|
return null
|
|
}
|
|
const Hx = level
|
|
const classNames = headingVariants({
|
|
className,
|
|
color,
|
|
textAlign,
|
|
textTransform,
|
|
type: as ?? level,
|
|
})
|
|
return <Hx className={classNames}>{children}</Hx>
|
|
}
|