63 lines
2.1 KiB
TypeScript
63 lines
2.1 KiB
TypeScript
'use client'
|
|
|
|
import React from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
const colorVariants = {
|
|
primary: 'text-[#fffff]',
|
|
secondary: 'text-gray-200',
|
|
custom: 'text-[#015eff]',
|
|
light: '[#fcfcfc]',
|
|
dark: 'text-gray-800',
|
|
} as const
|
|
|
|
type TextOwnProps = {
|
|
color?: keyof typeof colorVariants
|
|
className?: string
|
|
}
|
|
|
|
// Polymorphic helpers (no forwardRef needed)
|
|
type PolymorphicProps<E extends React.ElementType, P> =
|
|
P & { as?: E } &
|
|
Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
|
|
|
|
const createTextComponent = <DefaultElement extends React.ElementType>(
|
|
defaultElement: DefaultElement,
|
|
defaultClassName: string
|
|
) => {
|
|
type Props<E extends React.ElementType = DefaultElement> =
|
|
PolymorphicProps<E, TextOwnProps>
|
|
|
|
function Text<E extends React.ElementType = DefaultElement>({
|
|
as,
|
|
color = 'primary',
|
|
className,
|
|
children,
|
|
...props
|
|
}: Props<E>) {
|
|
const Tag = (as || defaultElement) as React.ElementType
|
|
return (
|
|
<Tag
|
|
className={cn(defaultClassName, colorVariants[color], className)}
|
|
{...(props as object)}
|
|
>
|
|
{children}
|
|
</Tag>
|
|
)
|
|
}
|
|
|
|
;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'})`
|
|
return Text
|
|
}
|
|
|
|
// Exports
|
|
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-3xl font-medium text-pretty lg:text-4xl')
|
|
export const P = createTextComponent('p', 'text-lg font-normal text-pretty leading-snug lg:text-xl lg:leading-normal')
|
|
export const H3 = createTextComponent('h3', 'text-2xl lg:text-3xl font-medium')
|
|
export const H4 = createTextComponent('h4', 'text-xl lg:text-2xl font-semibold leading-[1.15]')
|
|
export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold text-center')
|
|
export const CP = createTextComponent('p', 'text-sm lg:text-base leading-[1.525] font-light')
|
|
export const NL = createTextComponent('span', 'text-lg font-semibold leading-[1.23]')
|