-
Notifications
You must be signed in to change notification settings - Fork 0
/
CustomHeading.js
47 lines (38 loc) · 1.1 KB
/
CustomHeading.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import React from "react";
export default function CustomHeading({ size, head, subhead }) {
let heading;
let subheading;
const sublength = subhead.length;
switch (size) {
case "h2":
heading = <h2 className='pt-0 pb-2 text-3xl xl:text-4xl'> { head } </h2>;
break;
case "h3":
heading = <h3 className='pt-0 pb-2 text-2xl xl:text-3xl'> { head } </h3>;
break;
case "h4":
heading = <h4 className='pt-0 pb-2 text-xl xl:text-2xl'> { head } </h4>;
break;
case "h5":
heading = <h5 className='pt-0 pb-2 text-lg xl:text-xl'> { head } </h5>;
break;
case "h6":
heading = <h6 className='pt-0 pb-2'> { head } </h6>;
break;
}
if (sublength >= 1 ) {
subheading = `// ${subhead}`;
}
else {
subheading = "";
}
return (
<div>
<div before={`${subheading}`} className={`before:text-accent before:content-[attr(before)] before:text-md
before:lg:text-lg
text-light`}>
{ heading }
</div>
</div>
);
};