last work on invoice generation

src/components/ui/typography.tsx

@@ -0,0 +1,42 @@
+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;