feat(FE): Add PDF helper components for badges and typography

src/components/helper/pdf/typography/PdfTypography.tsx

@@ -0,0 +1,83 @@
+import { Color } from '@/types/theme';
+import { Text, StyleSheet } from '@react-pdf/renderer';
+
+type TypographySize = 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'small' | 'label';
+
+type TypographyVariant = Color | 'default';
+
+type PdfTypographyProps = {
+  children: React.ReactNode;
+  size?: TypographySize;
+  variant?: TypographyVariant;
+  color?: string;
+  marginBottom?: number;
+};
+
+const styles = StyleSheet.create({
+  h1: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 5,
+  },
+  h2: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    marginBottom: 8,
+  },
+  h3: {
+    fontSize: 10,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  h4: {
+    fontSize: 9,
+    fontWeight: 'bold',
+    marginBottom: 3,
+  },
+  p: {
+    fontSize: 10,
+    marginBottom: 4,
+  },
+  small: {
+    fontSize: 8,
+    marginBottom: 2,
+  },
+  label: {
+    fontSize: 9,
+    marginBottom: 5,
+  },
+});
+
+const variantColors: Record<TypographyVariant, string> = {
+  default: '#333333',
+  primary: '#1f74bf',
+  secondary: '#6B7280',
+  accent: '#8B5CF6',
+  neutral: '#6B7280',
+  info: '#3B82F6',
+  success: '#065F46',
+  warning: '#92400E',
+  error: '#DC2626',
+  none: '#333333',
+};
+
+export const PdfTypography = ({
+  children,
+  size = 'p',
+  variant = 'default',
+  color,
+  marginBottom,
+}: PdfTypographyProps) => {
+  const sizeStyle = styles[size];
+  const textColor = color || variantColors[variant];
+
+  const customStyle = {
+    ...(marginBottom !== undefined && { marginBottom }),
+  };
+
+  return (
+    <Text style={[sizeStyle, { color: textColor }, customStyle]}>
+      {children}
+    </Text>
+  );
+};