ok

src/components/Texts.tsx

@@ -1,38 +1,48 @@
 import React from 'react';
 import { cn } from '@/lib/utils';
 
-const textColors = 'text-[#2F3178]';
+const colorVariants = {
+  primary: 'text-[#2F3178]',
+  secondary: 'text-gray-600',
+  custom: 'text-[#1c1c49]',
+};
 
-type TextOwnProps<E extends React.ElementType> = {
+type TextProps<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>>;
+  color?: keyof typeof colorVariants;
+} & Omit<React.ComponentPropsWithoutRef<E>, 'as' | 'children' | 'className' | 'color'>;
 
 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;
+  const Component = React.forwardRef<React.ElementRef<E>, TextProps<E>>(
+    ({ as, color = 'primary', className, children, ...props }, ref) => {
+      const Tag = as || defaultElement;
+      return (
+        <Tag
+          ref={ref}
+          className={cn(defaultClassName, colorVariants[color], className)}
+          {...props}
+        >
+          {children}
+        </Tag>
+      );
+    }
+  );
 
-    return (
-      <Component className={cn(defaultClassName, textColors, className)} {...rest}>
-        {children}
-      </Component>
-    );
-  };
-  return Text;
+  Component.displayName = `Text(${defaultElement})`;
+  return Component;
 };
 
 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 P = createTextComponent('p', 'text-xl font-normal 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 CT = createTextComponent('span', 'text-base lg:text-xl font-semibold text-center');
+export const CP = createTextComponent('p', 'text-sm lg:text-base leading-relaxed font-light');
 export const NL = createTextComponent('span', 'text-lg font-semibold leading-6');