49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const colorVariants = {
|
|
primary: 'text-[#2F3178]',
|
|
secondary: 'text-gray-600',
|
|
custom: 'text-[#1c1c49]',
|
|
};
|
|
|
|
type TextProps<E extends React.ElementType> = {
|
|
as?: E;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
color?: keyof typeof colorVariants;
|
|
} & Omit<React.ComponentPropsWithoutRef<E>, 'as' | 'children' | 'className' | 'color'>;
|
|
|
|
const createTextComponent = <E extends React.ElementType>(
|
|
defaultElement: E,
|
|
defaultClassName: string
|
|
) => {
|
|
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>
|
|
);
|
|
}
|
|
);
|
|
|
|
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-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-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');
|