ok

src/components/Texts.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { cn } from '@/lib/utils';
+
+const textColors = 'text-[#2F3178]';
+
+type TextOwnProps<E extends React.ElementType> = {
+  as?: E;
+  children: React.ReactNode;
+  className?: string;
+};
+
+type TextProps<E extends React.ElementType> = TextOwnProps<E> & Omit<React.ComponentProps<E>, keyof TextOwnProps<E>>;
+
+const createTextComponent = <E extends React.ElementType>(
+  defaultElement: E,
+  defaultClassName: string
+) => {
+  const Text = <C extends React.ElementType = E>({ as, children, className, ...rest }: TextProps<C>) => {
+    const Component = as || defaultElement;
+
+    return (
+      <Component className={cn(defaultClassName, textColors, className)} {...rest}>
+        {children}
+      </Component>
+    );
+  };
+  return Text;
+};
+
+export const H1 = createTextComponent('h1', 'text-5xl font-medium tracking-tight text-balance lg:text-8xl');
+export const PL = createTextComponent('p', 'text-2xl font-medium text-pretty leading-[1.2] lg:text-3xl');
+export const H2 = createTextComponent('h2', 'text-4xl font-medium text-pretty lg:text-5xl');
+export const P = createTextComponent('p', 'text-xl font-medium text-pretty lg:text-2xl');
+export const H3 = createTextComponent('h3', 'text-3xl lg:text-4xl font-medium');
+export const H4 = createTextComponent('h4', 'text-2xl lg:text-3xl font-semibold leading-tight');
+export const CT = createTextComponent('span', 'text-sm lg:text-base font-semibold text-center');
+export const CP = createTextComponent('p', 'text-sm leading-relaxed font-light');
+export const NL = createTextComponent('span', 'text-lg font-semibold leading-6');