<Heading/>

heading.tsx

tsxCopy code
1import { cn } from "@/utils/cn";
2
3interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
4  level?: 1 | 2 | 3 | 4 | 5 | 6;
5}
6
7export function Heading({
8  level = 1,
9  children,
10  className,
11  ...props
12}: Readonly<HeadingProps>) {
13  switch (level) {
14    case 1: {
15      return (
16        <h1 className={cn("text-3xl font-semibold", className)} {...props}>
17          {children}
18        </h1>
19      );
20    }
21    case 2: {
22      return (
23        <h2 className={cn("text-2xl font-semibold", className)} {...props}>
24          {children}
25        </h2>
26      );
27    }
28    case 3: {
29      return (
30        <h3 className={cn("text-xl font-semibold", className)} {...props}>
31          {children}
32        </h3>
33      );
34    }
35    case 4: {
36      return (
37        <h4 className={cn("text-lg font-semibold", className)} {...props}>
38          {children}
39        </h4>
40      );
41    }
42    case 5: {
43      return (
44        <h5 className={cn("text-base font-semibold", className)} {...props}>
45          {children}
46        </h5>
47      );
48    }
49    case 6: {
50      return (
51        <h6 className={cn("text-sm font-semibold", className)} {...props}>
52          {children}
53        </h6>
54      );
55    }
56    default:
57  }
58}

Loved this post?

🍕 Buy me a pizzaDonate via

Comments