My personal website
renderg.host
1import { cn } from '@/lib/utils';
2import React from 'react';
3import { HeadingStyles } from './Heading.styles';
4import { HeadingLevel, HeadingProps } from './Heading.types';
5
6const getHeadingTag = (level: HeadingLevel) => {
7 switch (level) {
8 case 1:
9 return 'h1';
10 case 2:
11 return 'h2';
12 case 3:
13 return 'h3';
14 case 4:
15 return 'h4';
16 case 5:
17 return 'h5';
18 case 6:
19 return 'h6';
20 default:
21 return 'h3';
22 }
23};
24
25export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
26 ({ children, level = 3, size = 'md', className = '', ...props }, ref) => {
27 const Component = getHeadingTag(level);
28
29 return React.createElement(
30 Component,
31 {
32 ref,
33 className: cn(HeadingStyles.base, HeadingStyles.sizes[size], className),
34 ...props,
35 },
36 children,
37 );
38 },
39);
40
41Heading.displayName = 'Heading';