Function Home

src/pages/Home.tsx:16–342

()

}

function Home() {
  const [convertedImages, setConvertedImages] = useState<ConvertedImage[]>([]);
  const [isConverting, setIsConverting] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const [isZipping, setIsZipping] = useState(false);
  const [theme, setTheme] = useState<'light' | 'dark'>(
    localStorage.getItem('theme') as 'light' | 'dark' || 
    (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
  );

  useEffect(() => {
    document.documentElement.classList.toggle('dark', theme === 'dark');
    localStorage.setItem('theme', theme);
  }, [theme]);

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light');
  };

  const convertToWebP = useCallback(async (file: File): Promise<ConvertedImage> => {
    const img = document.createElement('img');
    const imageUrl = URL.createObjectURL(file);
    
    return new Promise((resolve) => {
      img.onload = () => {
        const canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
        
        const ctx = canvas.getContext('2d')!;
        ctx.drawImage(img, 0, 0);
        
        const attemptConversion = (quality: number) => {
        canvas.toBlob(
          (blob) => {
            if (blob) {
              if(file.size > blob.size){
                resolve({
                  originalName: file.name.replace(/\.[^/.]+$/, ''),
                  webpBlob: blob,
                  originalSize: file.size,
                  convertedSize: blob.size,
                });
              }else{
                attemptConversion(quality - 0.1);
              }
              
            }
            URL.revokeObjectURL(imageUrl);
          },
          'image/webp',
          quality
        )};
        attemptConversion(0.8);
      };
      
      img.src = imageUrl;
    });