Building Professional UI from SVG

Example 1 - Product Gallery Component:

TypeScript
// packages/ui-tokens/src/index.ts
export const tokens = {
  colors: {
    primary: '#2563eb',
    secondary: '#64748b'
  },
  spacing: {
    xs: '0.25rem',
    sm: '0.5rem'
  }
};

// apps/web/components/ProductGallery.tsx
'use client';
import { useState } from 'react';
import { useTranslation } from '@/hooks/useTranslation';

export const ProductGallery: React.FC<{
  images: string[];
  locale: 'en' | 'ar';
}> = ({ images, locale }) => {
  const [activeIndex, setActiveIndex] = useState(0);
  const { t } = useTranslation(locale);
  
  return (
    <div className={`grid gap-4 ${locale === 'ar' ? 'rtl' : 'ltr'}`}>
      <div className="aspect-square overflow-hidden rounded-lg">
        <img 
          src={images[activeIndex]} 
          alt={t('product.gallery.main')}
          className="w-full h-full object-cover"
        />
      </div>
      <div className="flex gap-2">
        {images.map((img, index) => (
          <button
            key={index}
            onClick={() => setActiveIndex(index)}
            className={`w-16 h-16 rounded border-2 ${
              index === activeIndex ? 'border-primary' : 'border-gray-200'
            }`}
          >
            <img src={img} className="w-full h-full object-cover" />
          </button>
        ))}
      </div>
    </div>
  );
};

Example 2 - RTL Layout Component:

TypeScript
// apps/web/components/ProductDetailClient.tsx
interface ProductDetailProps {
  product: Product;
  locale: 'en' | 'ar';
}

export const ProductDetailClient: React.FC<ProductDetailProps> = ({
  product,
  locale
}) => {
  const isRTL = locale === 'ar';
  
  return (
    <div className={cn(
      'grid lg:grid-cols-2 gap-8',
      isRTL && 'rtl'
    )}>
      <ProductGallery images={product.images} locale={locale} />
      <div className={cn(
        'space-y-6',
        isRTL && 'text-right'
      )}>
        <h1 className="text-3xl font-bold">
          {product.name[locale]}
        </h1>
        <VariantSelector 
          variants={product.variants}
          locale={locale}
        />
        <StickyAddToCart 
          productId={product.id}
          locale={locale}
        />
      </div>
    </div>
  );
};