43 lines
823 B
TypeScript
43 lines
823 B
TypeScript
import { cva } from "class-variance-authority"
|
|
|
|
import styles from "./title.module.css"
|
|
|
|
import type { HeadingProps } from "@/types/components/myPages/title"
|
|
|
|
const config = {
|
|
variants: {
|
|
text: {
|
|
uppercase: styles.uppercase,
|
|
},
|
|
type: {
|
|
h1: styles.h1,
|
|
h2: styles.h2,
|
|
h3: styles.h3,
|
|
h4: styles.h4,
|
|
h5: styles.h5,
|
|
h6: styles.h6,
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
type: "h1",
|
|
},
|
|
} as const
|
|
|
|
const headingStyles = cva(styles.heading, config)
|
|
|
|
export default function Title({
|
|
as,
|
|
children,
|
|
className = "",
|
|
level = "h1",
|
|
uppercase = false,
|
|
}: HeadingProps) {
|
|
const Hx = level
|
|
const classNames = headingStyles({
|
|
className,
|
|
text: uppercase ? "uppercase" : undefined,
|
|
type: as ?? level,
|
|
})
|
|
return <Hx className={classNames}>{children}</Hx>
|
|
}
|