1import { cva, VariantProps } from 'class-variance-authority'
2import { classNames } from '../../../lib/utils'
3
4const titleVariants = cva('text-alpha-900 font-sans', {
5  variants: {
6    variant: {
7      small: 'text-lg font-semibold leading-7',
8      medium: 'text-2xl leading-8 md:text-4xl tracking-tight',
9      large: 'text-3xl md:text-6xl font-medium'
10    }
11  },
12  defaultVariants: {
13    variant: 'medium'
14  }
15})
16
17type TitleProps = VariantProps<typeof titleVariants> & {
18  className?: string
19  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'
20  children: React.ReactNode
21}
22
23const Title: React.FC<TitleProps> = ({
24  className,
25  variant,
26  as: Component = 'h2',
27  children,
28  ...props
29}) => {
30  const classes = classNames(titleVariants({ variant, className }))
31
32  return (
33    <Component className={classes} {...props}>
34      {children}
35    </Component>
36  )
37}
38
39Title.displayName = 'Title'
40
41export { Title, titleVariants }
42

1import { cva, VariantProps } from 'class-variance-authority'
2import { classNames } from '../../../lib/utils'
3
4const titleVariants = cva('text-alpha-900 font-sans', {
5  variants: {
6    variant: {
7      small: 'text-lg font-semibold leading-7',
8      medium: 'text-2xl leading-8 md:text-4xl tracking-tight',
9      large: 'text-3xl md:text-6xl font-medium'
10    }
11  },
12  defaultVariants: {
13    variant: 'medium'
14  }
15})
16
17type TitleProps = VariantProps<typeof titleVariants> & {
18  className?: string
19  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span'
20  children: React.ReactNode
21}
22
23const Title: React.FC<TitleProps> = ({
24  className,
25  variant,
26  as: Component = 'h2',
27  children,
28  ...props
29}) => {
30  const classes = classNames(titleVariants({ variant, className }))
31
32  return (
33    <Component className={classes} {...props}>
34      {children}
35    </Component>
36  )
37}
38
39Title.displayName = 'Title'
40
41export { Title, titleVariants }
42