43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
import type { ElementType } from 'react';
|
|
|
|
interface TypographyProps {
|
|
variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'caption';
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
color?: string; // Add color prop
|
|
}
|
|
|
|
const Typography: React.FC<TypographyProps> = ({ variant, children, className = '', color }) => {
|
|
const variantStyles: Record<string, React.CSSProperties> = {
|
|
h1: { fontSize: '2.5rem', fontWeight: 'bold' },
|
|
h2: { fontSize: '2rem', fontWeight: 'bold' },
|
|
h3: { fontSize: '1.75rem', fontWeight: 'bold' },
|
|
h4: { fontSize: '1.5rem', fontWeight: 'bold' },
|
|
h5: { fontSize: '1.25rem', fontWeight: 'bold' },
|
|
h6: { fontSize: '1rem', fontWeight: 'bold' },
|
|
body1: { fontSize: '1rem', fontWeight: 'normal' },
|
|
body2: { fontSize: '0.875rem', fontWeight: 'normal' },
|
|
caption: { fontSize: '0.75rem', fontWeight: 'normal' },
|
|
};
|
|
|
|
const combinedStyle = { ...variantStyles[variant], ...(color && { color }), ...(className ? { className } : {}) };
|
|
|
|
const variantToTag: Record<string, ElementType> = {
|
|
h1: 'h1',
|
|
h2: 'h2',
|
|
h3: 'h3',
|
|
h4: 'h4',
|
|
h5: 'h5',
|
|
h6: 'h6',
|
|
body1: 'p',
|
|
body2: 'p',
|
|
caption: 'span',
|
|
};
|
|
|
|
const Tag: ElementType = variantToTag[variant];
|
|
|
|
return <Tag style={combinedStyle}>{children}</Tag>;
|
|
};
|
|
|
|
export default Typography;
|