fix(text): next.js fix dynamic creation for text component

Author: hackr-sh

Diff for: src/components/Text.tsx

@@ -11,42 +11,45 @@ export type TextProps = React.HTMLAttributes<
 
 export const Text = (props: TextProps) => {
   const { variant } = props;
-  const variantMapping = {
-    h1: {
-      fontSize: "2em",
-      fontWeight: 700
-    },
-    h2: {
-      fontSize: "1.5em",
-      fontWeight: 600
-    },
-    h3: {
-      fontSize: "1.17em",
-      fontWeight: 600
-    },
-    h4: {
-      fontSize: "1em",
-      fontWeight: 500
-    },
-    h5: {
-      fontSize: "0.83em",
-      fontWeight: 500
-    },
-    h6: {
-      fontSize: "0.67em",
-      fontWeight: 500
-    },
-    p: {
-      fontSize: "1em",
-      fontWeight: 400
-    }
-  };
-  const TextElement = styled[variant ?? "p"]`
-    font-family: "Poppins", sans-serif;
-    font-weight: ${(props) => variantMapping[variant ?? "p"].fontWeight};
-    font-size: ${(props) => variantMapping[variant ?? "p"].fontSize};
-    color: ${(props) => props.theme.text};
-  `;
   // @ts-ignore
-  return <TextElement {...props} />;
+  return <TextElement as={variant} {...props} />;
+};
+
+
+const variantMapping = {
+  h1: {
+    fontSize: "2em",
+    fontWeight: 700
+  },
+  h2: {
+    fontSize: "1.5em",
+    fontWeight: 600
+  },
+  h3: {
+    fontSize: "1.17em",
+    fontWeight: 600
+  },
+  h4: {
+    fontSize: "1em",
+    fontWeight: 500
+  },
+  h5: {
+    fontSize: "0.83em",
+    fontWeight: 500
+  },
+  h6: {
+    fontSize: "0.67em",
+    fontWeight: 500
+  },
+  p: {
+    fontSize: "1em",
+    fontWeight: 400
+  }
 };
+
+const TextElement = styled.p<TextProps>`
+    font-family: "Poppins", sans-serif;
+    font-weight: ${(props) => variantMapping[props.variant ?? "p"].fontWeight};
+    font-size: ${(props) => variantMapping[props.variant ?? "p"].fontSize};
+    color: ${(props) => props.theme.text};
+  `;