first commit

2026-01-26 10:14:10 +03:30
commit 9a995d5109
160 changed files with 34879 additions and 0 deletions
--- a/src/components/Typography/Typography.tsx
+++ b/src/components/Typography/Typography.tsx
@@ -0,0 +1,113 @@
+import React, { JSX } from "react";
+import clsx from "clsx";
+
+type Variant =
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | "subtitle1"
+  | "subtitle2"
+  | "body1"
+  | "body2"
+  | "caption"
+  | "overline";
+
+type Align = "left" | "center" | "right" | "justify";
+
+interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
+  variant?: Variant;
+  align?: Align;
+  color?: string;
+  fontWeight?: "light" | "normal" | "medium" | "semibold" | "bold";
+  gutterBottom?: boolean;
+  noWrap?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  component?: React.ElementType;
+}
+
+const variantStyles: Record<Variant, string> = {
+  h1: "text-5xl",
+  h2: "text-4xl",
+  h3: "text-3xl",
+  h4: "text-2xl",
+  h5: "text-xl",
+  h6: "text-lg",
+  subtitle1: "text-base",
+  subtitle2: "text-sm",
+  body1: "text-base",
+  body2: "text-sm",
+  caption: "text-xs",
+  overline: "text-[10px] uppercase tracking-widest",
+};
+
+const variantToElement: Record<Variant, keyof JSX.IntrinsicElements> = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  subtitle1: "h6",
+  subtitle2: "h6",
+  body1: "p",
+  body2: "p",
+  caption: "span",
+  overline: "span",
+};
+
+const Typography: React.FC<TypographyProps> = ({
+  variant = "body1",
+  align = "left",
+  color = "",
+  fontWeight = "normal",
+  gutterBottom = false,
+  noWrap = false,
+  className,
+  component,
+  children,
+  ...props
+}) => {
+  const Tag = (component || variantToElement[variant]) as React.ElementType;
+
+  const getColors = () => {
+    if (color) {
+      return color;
+    } else return "text-primary-900 dark:text-dark-100";
+  };
+
+  return (
+    <Tag
+      className={clsx(
+        "flex items-center gap-1",
+        variantStyles[variant],
+        color,
+        getColors(),
+        {
+          "mb-2": gutterBottom,
+          truncate: noWrap,
+          "text-left": align === "right",
+          "text-center": align === "center",
+          "text-right": align === "left",
+          "text-justify": align === "justify",
+          "font-light": fontWeight === "light",
+          "font-normal": fontWeight === "normal",
+          "font-medium": fontWeight === "medium",
+          "font-semibold": fontWeight === "semibold",
+          "font-bold": fontWeight === "bold",
+        },
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </Tag>
+  );
+};
+
+export default Typography;
+
+