[UI v2] feat: Simplifies typography by introducing a simple typography component

ui-v2/src/components/ui/typography.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Typography } from "./typography";
+
+const meta: Meta<typeof Typography> = {
+	title: "UI/Typography",
+	component: Typography,
+	parameters: {
+		docs: {
+			description: {
+				component: "Typography is used as your basic text component",
+			},
+		},
+	},
+};
+export default meta;
+
+type Story = StoryObj<typeof Typography>;
+
+export const Usage: Story = {
+	render: () => {
+		return (
+			<div>
+				<Typography variant="h1">h1 Typography</Typography>
+				<Typography variant="h2">h2 Typography</Typography>
+				<Typography variant="h3">h3 Typography</Typography>
+				<Typography variant="h4">h4 Typography</Typography>
+				<Typography variant="bodyLarge">bodyLarge Typography</Typography>
+				<Typography variant="body">body Typography</Typography>
+				<Typography variant="bodySmall">bodySmall Typography</Typography>
+			</div>
+		);
+	},
+};

ui-v2/src/components/ui/typography.tsx

@@ -0,0 +1,76 @@
+import { cn } from "@/lib/utils";
+import { forwardRef } from "react";
+
+type Variant = "h1" | "h2" | "h3" | "h4" | "bodyLarge" | "body" | "bodySmall";
+
+type Props = {
+	className?: string;
+	variant?: Variant;
+	children: React.ReactNode;
+};
+
+export const Typography = forwardRef<HTMLDivElement, Props>(
+	({ variant = "body", className, children }, ref) => {
+		switch (variant) {
+			case "h1":
+				return (
+					<h1
+						ref={ref}
+						className={cn("text-4xl font-extrabold tracking-tight", className)}
+					>
+						{children}
+					</h1>
+				);
+			case "h2":
+				return (
+					<h2
+						ref={ref}
+						className={cn("text-3xl  font-semibold tracking-tight", className)}
+					>
+						{children}
+					</h2>
+				);
+			case "h3":
+				return (
+					<h3
+						ref={ref}
+						className={cn("text-2xl font-semibold tracking-tight", className)}
+					>
+						{children}
+					</h3>
+				);
+			case "h4":
+				return (
+					<h4
+						ref={ref}
+						className={cn("text-xl font-semibold tracking-tight", className)}
+					>
+						{children}
+					</h4>
+				);
+
+			case "bodyLarge":
+				return (
+					<h4 ref={ref} className={cn("text-lg", className)}>
+						{children}
+					</h4>
+				);
+
+			case "bodySmall":
+				return (
+					<p ref={ref} className={cn("text-sm", className)}>
+						{children}
+					</p>
+				);
+
+			case "body":
+			default:
+				return (
+					<p ref={ref} className={cn("text-base", className)}>
+						{children}
+					</p>
+				);
+		}
+	},
+);
+Typography.displayName = "Typography";