64 lines
1.3 KiB
TypeScript
64 lines
1.3 KiB
TypeScript
import React, { ReactNode } from 'react';
|
|
|
|
interface TextProps {
|
|
children: ReactNode;
|
|
className?: string;
|
|
size?: 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
|
|
weight?: 'normal' | 'medium' | 'semibold' | 'bold';
|
|
color?: string;
|
|
font?: 'mono' | 'sans';
|
|
align?: 'left' | 'center' | 'right';
|
|
truncate?: boolean;
|
|
}
|
|
|
|
export function Text({
|
|
children,
|
|
className = '',
|
|
size = 'base',
|
|
weight = 'normal',
|
|
color = '',
|
|
font = 'sans',
|
|
align = 'left',
|
|
truncate = false
|
|
}: TextProps) {
|
|
const sizeClasses = {
|
|
xs: 'text-xs',
|
|
sm: 'text-sm',
|
|
base: 'text-base',
|
|
lg: 'text-lg',
|
|
xl: 'text-xl',
|
|
'2xl': 'text-2xl',
|
|
'3xl': 'text-3xl',
|
|
'4xl': 'text-4xl'
|
|
};
|
|
|
|
const weightClasses = {
|
|
normal: 'font-normal',
|
|
medium: 'font-medium',
|
|
semibold: 'font-semibold',
|
|
bold: 'font-bold'
|
|
};
|
|
|
|
const fontClasses = {
|
|
mono: 'font-mono',
|
|
sans: 'font-sans'
|
|
};
|
|
|
|
const alignClasses = {
|
|
left: 'text-left',
|
|
center: 'text-center',
|
|
right: 'text-right'
|
|
};
|
|
|
|
const classes = [
|
|
sizeClasses[size],
|
|
weightClasses[weight],
|
|
fontClasses[font],
|
|
alignClasses[align],
|
|
color,
|
|
truncate ? 'truncate' : '',
|
|
className
|
|
].filter(Boolean).join(' ');
|
|
|
|
return <span className={classes}>{children}</span>;
|
|
} |