Attempted a Text component prototype

src/components/Text.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { cx } from "class-variance-authority";
+import type {
+  Tag,
+  ColorEnding,
+  Size,
+  Weight,
+  Hundred,
+  TwSize,
+  TwWeight,
+  TwColor,
+} from "@utils/types/tw";
+import { weights } from "@utils/types/tw";
+
+/*
+    THIS NEEDS TO BE ABLE TO HANDLE TYPOGRAPHY SIZE AT SMALL BREAKPOINTS
+    (IT CAN'T CURRENTLY)
+ */
+
+interface Props {
+  children: React.ReactNode;
+  tag?: Tag;
+  color?: ColorEnding;
+  // Override default tag styling
+  size?: Size;
+  weight?: Weight | Hundred;
+  className?: string;
+  overrideStyles?: boolean;
+}
+
+const Text: React.FC<Props> = ({
+  children,
+  tag = "p",
+  color,
+  size,
+  weight,
+  className,
+  overrideStyles = false,
+}) => {
+  const styleMap: Record<Tag, { size: TwSize; weight: TwWeight }> = {
+    p: { size: "text-base", weight: "font-normal" },
+    h1: { size: "text-5xl", weight: "font-bold" },
+    h2: { size: "text-4xl", weight: "font-bold" },
+    h3: { size: "text-3xl", weight: "font-bold" },
+    h4: { size: "text-2xl", weight: "font-bold" },
+    h5: { size: "text-base", weight: "font-semibold" },
+    h6: { size: "text-base", weight: "font-semibold" },
+  };
+
+  const twDefaultColor: TwColor = "text-fg";
+  const twDefaultSize: TwSize = styleMap[tag].size;
+  const twDefaultWeight: TwWeight = styleMap[tag].weight;
+
+  const twParamColor: TwColor | undefined =
+    color === undefined ? undefined : `text-${color}`;
+  const twParamSize: TwSize | undefined =
+    size === undefined ? undefined : `text-${size}`;
+  const twParamWeight: TwWeight | undefined =
+    weight === undefined
+      ? undefined
+      : `font-${
+          (typeof weight === "number" ? weights[weight / 100] : weight) ??
+          "normal"
+        }`;
+
+  return React.createElement(
+    tag,
+    {
+      className: overrideStyles
+        ? className
+        : cx(
+            className,
+            twParamColor ?? twDefaultColor,
+            twParamSize ?? twDefaultSize,
+            twParamWeight ?? twDefaultWeight
+          ),
+    },
+    children
+  );
+};
+
+export default Text;

src/pages/index.tsx

@@ -2,6 +2,7 @@ import { type NextPage } from "next";
 import Image from "next/image";
 import Button from "@components/Button";
 import Divider from "@components/Divider";
+import Text from "@components/Text";
 
 const Home: NextPage = () => {
   return (
@@ -19,15 +20,21 @@ const Home: NextPage = () => {
 
 export default Home;
 
+// === Sections =====================================================
+
 const Hero: React.FC = () => {
   return (
     <section className="custom-home-bg">
       <div className="container">
-        <h1 className="text-5xl font-bold leading-tight text-primary drop-shadow-blur">
+        <Text
+          tag="h1"
+          color="primary"
+          className="leading-tight drop-shadow-blur"
+        >
           Collaborate with experts.
           <br />
           Educate the world.
-        </h1>
+        </Text>
         <p className="mt-6 mb-16 text-3xl font-bold drop-shadow-blur">
           Get connected with Parallel
         </p>

src/utils/types/tw.ts

@@ -0,0 +1,50 @@
+export type Hundred = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+
+export type Color =
+  | "bg"
+  | "fg"
+  | "primary"
+  | "secondary"
+  | "tertiary"
+  | "quaternary"
+  | "success"
+  | "warning"
+  | "error";
+
+export type Size =
+  | "xs"
+  | "sm"
+  | "base"
+  | "lg"
+  | "xl"
+  | "2xl"
+  | "3xl"
+  | "4xl"
+  | "5xl"
+  | "6xl"
+  | "7xl"
+  | "8xl"
+  | "9xl";
+
+export const weights = [
+  "thin",
+  "extralight",
+  "light",
+  "normal",
+  "medium",
+  "semibold",
+  "bold",
+  "extrabold",
+  "black",
+] as const;
+export type Weight = (typeof weights)[number];
+
+export type Tag = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export type ColorEnding = Color | `${Color}-${Hundred}`;
+
+export type TwColor = `text-${ColorEnding}`;
+
+export type TwSize = `text-${Size}`;
+
+export type TwWeight = `font-${Weight}`;