pizza-online

1
import {cn} from '@/lib/utils'
2
import React from 'react'
3

4
type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
5

6
interface Props extends React.HTMLAttributes<HTMLElement> {
7
  size?: TitleSize
8
  className?: string
9
  text: string
10
}
11

12
export const Title: React.FC<Props> = ({text, size = 'sm', className, ...rest}) => {
13
  const mapTagBySize = {
14
    xs: 'h5',
15
    sm: 'h4',
16
    md: 'h3',
17
    lg: 'h2',
18
    xl: 'h1',
19
    '2xl': 'h1',
20
  } as const
21

22
  const mapClassNameBySize = {
23
    xs: 'text-[16px]',
24
    sm: 'text-[22px]',
25
    md: 'text-[26px]',
26
    lg: 'text-[32px]',
27
    xl: 'text-[40px]',
28
    '2xl': 'text-[48px]',
29
  } as const
30

31
  return React.createElement(
32
    mapTagBySize[size],
33
    {className: cn(mapClassNameBySize[size], className), ...rest},
34
    text
35
  )
36
}
37