feat(Typography): created typography reusables component

components/reusables/typography/h1/index.tsx

@@ -1,11 +1,14 @@
-import React from 'react'
+import React from "react";
+import { TypographyInterface } from "../index.interface";
 
-interface H1Interface {
- className?: string | undefined
- children: any
-}
-const H1 = (props: H1Interface) => {
- return <h1 className={"text-3xl font-bold " + props.className}>{props.children}</h1>;
-}
+const H1 = (props: TypographyInterface) => {
+ const fontIsBold = props.fontBold ? "font-bold" : "font-extralight";
 
-export default H1
+ return (
+ <h1 className={`text-3xl ${fontIsBold} ${props.className}`}>
+ {props.children}
+ </h1>
+ );
+};
+
+export default H1;

components/reusables/typography/h2/index.tsx

@@ -1,7 +1,13 @@
 import React from "react";
+import { TypographyInterface } from "../index.interface";
 
-const H2 = ({ children }: any) => {
- return <h1 className="text-2xl font-bold">{children}</h1>;
+const H2 = (props: TypographyInterface) => {
+ const fontIsBold = props.fontBold ? "font-bold" : "font-extralight";
+ return (
+ <h2 className={`text-lg ${fontIsBold} ${props.className}`}>
+ {props.children}
+ </h2>
+ );
 };
 
 export default H2;

components/reusables/typography/h3/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { TypographyInterface } from "../index.interface";
+
+const H3 = (props: TypographyInterface) => {
+ const fontIsBold = props.fontBold ? "font-bold" : "font-extralight";
+ return (
+ <h3 className={`text-lg ${fontIsBold} ${props.className}`}>
+ {props.children}
+ </h3>
+ );
+};
+
+export default H3;

components/reusables/typography/h4/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { TypographyInterface } from "../index.interface";
+
+const H4 = (props: TypographyInterface) => {
+ const fontIsBold = props.fontBold ? "font-bold" : "font-extralight";
+
+ return (
+ <h4 className={`text-lg ${fontIsBold} ${props.className}`}>
+ {props.children}
+ </h4>
+ );
+};
+
+export default H4;

components/reusables/typography/h5/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { TypographyInterface } from "../index.interface";
+
+const H5 = (props: TypographyInterface) => {
+ const fontIsBold = props.fontBold ? "font-bold" : "font-extralight";
+
+ return (
+ <h5 className={`text-lg ${fontIsBold} ${props.className}`}>
+ {props.children}
+ </h5>
+ );
+};
+
+export default H5;

components/reusables/typography/index.interface.tsx

@@ -0,0 +1,5 @@
+export interface TypographyInterface {
+ children: any;
+ className?: string | undefined;
+ fontBold?: boolean | true;
+}