Arabic Text.jsx Direct

const styles = size, fontWeight: weightMap[weight] ;

function ProductCard() return ( <div> <ArabicText> سعر المنتج: $49.99 </ArabicText> /* Renders as: سعر المنتج: ٤٩.٩٩ $ */ </div> );

1. Auto-detect and Format Numbers // Advanced ArabicText with number conversion const ArabicText = ( children, useArabicNumerals = true, ...props ) => const convertToArabicNumerals = (text) => const westernToEastern = '0': '٠', '1': '١', '2': '٢', '3': '٣', '4': '٤', '5': '٥', '6': '٦', '7': '٧', '8': '٨', '9': '٩' ; Arabic Text.jsx

const sizeMap = small: '0.875rem', medium: '1rem', large: '1.25rem', xlarge: '1.5rem' ;

// components/ArabicText.jsx import React from 'react'; const ArabicText = ( children, className, ...props ) => return ( <span dir="rtl" lang="ar" className= arabic-text $ ...props > children </span> ); ; const styles = size

export default ArabicText; A more robust implementation includes proper CSS and accessibility features:

const ArabicText = ( children, ...props ) => const fontLoaded = useArabicFont(); function ProductCard() return ( &lt

return ( <div dir=isRTL ? 'rtl' : 'ltr'> <ArabicText> t('welcome_message') </ArabicText> </div> );