@catalystsoftware/ui 1.0.12 → 1.0.15

package/dist/components/catalyst-ui/tools/convert/converter.tsx

@@ -0,0 +1,969 @@
+import { useRef, useState, useEffect } from "react";
+import { Button, ExportFile, H3, H4, Iframe, KBD, OrderedList, P, PM, ScrollY, Tabs, TabsContent, TabsList, TabsTrigger, TsxSection, Field, FieldLabel, FieldDescription, FieldError, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Upload, CopyText, CodeBlockSection, SpinnerV4, Card, Input, Label, ExternalDropZone, useToasted, Switch } from "~/components/catalyst-ui";
+import { Code, Copy, X, Image as ImageIcon, Type, Palette, Grid, Layers, Download } from "lucide-react";
+import { useCopyToClipboard } from "~/components/catalyst-ui";
+
+const formatFileSize = (bytes: number): string => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};
+
+export default function Converter({ toc, setToc }) {
+  const { toast } = useToasted()
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [file, setFile] = useState<any>({});
+  const [converted, setConverted] = useState<string | null>(null);
+  const [output, setOutput] = useState<string>(null);
+  const [error, setError] = useState("");
+  const [isConverting, setIsConverting] = useState(false);
+  // Favicon specific states
+  const [textContent, setTextContent] = useState("C");
+  const [backgroundColor, setBackgroundColor] = useState("#4f46e5");
+  const [textColor, setTextColor] = useState("#ffffff");
+  const [fontSize, setFontSize] = useState(32);
+  const [includeAppleTouchIcon, setIncludeAppleTouchIcon] = useState(true);
+  const [includeManifest, setIncludeManifest] = useState(true);
+  const [includeHTML, setIncludeHTML] = useState(true);
+  const [siteName, setSiteName] = useState("My Website");
+  const [themeColor, setThemeColor] = useState("#4f46e5");
+  const [generatedFavicons, setGeneratedFavicons] = useState<any[]>([]);
+
+  useEffect(() => {
+    if (String(toc) === "MP4-to-MP3") setOutput("mp3");
+    if (String(toc) === "Base64-to-PNG") setOutput("png");
+    if (String(toc) === "Base64-to-JPG") setOutput("jpg");
+    if (String(toc) === "Base64-to-WEBP") setOutput("webp");
+    if (String(toc) === "Base64-to-PDF") setOutput("pdf");
+    if (String(toc) === "CSV-to-JSON") setOutput("array");
+    if (String(toc) === "PNG-to-SVG" || String(toc) === "JPG-to-SVG" || String(toc) === "WEBP-to-SVG") setOutput("svg");
+    if (String(toc) === "PNG-to-Base64" || String(toc) === "JPG-to-Base64" || String(toc) === "WEBP-to-Base64" || String(toc) === "PDF-to-Base64") setOutput("dataURI");
+    // Favicon outputs
+    if (String(toc) === "Image-to-Favicon" || String(toc) === "Text-to-Favicon") setOutput("ico");
+  }, [toc]);
+
+ const handleChange = (value: string) => {
+    setOutput(value);
+    if (!value) {
+      setError("Please select an output");
+    } else {
+      setError("");
+    }
+  };
+
+  const handleFileSelect = (file: File) => {
+    if (file) {
+      setSelectedFile(file);
+      setFile({
+        id: Math.random().toString(36).substring(7),
+        file: file,
+        status: "pending",
+      });
+      setConverted(null);
+      setGeneratedFavicons([]);
+      setError("");
+    }
+  };
+
+ const handleFileRemove = (fileId: string) => {
+    setFile({});
+    setSelectedFile(null);
+    setConverted(null);
+    setGeneratedFavicons([]);
+    setError("");
+  };
+
+  const clearAllFiles = () => {
+    setFile({});
+    setSelectedFile(null);
+    setConverted(null);
+    setGeneratedFavicons([]);
+    setError("");
+  };
+
+ const convertFile = async () => {
+    if (!file.file && toc !== "Text-to-Favicon") {
+      toast.error('Error!', 'Please upload a file first!', { variant: 'accent' })
+      return;
+    }
+
+    if (toc !== "MP4-to-MP3" && !output) {
+      toast.error('Error!', 'Please select an output format!', { variant: 'accent' })
+      setError("Please select an output format");
+      return;
+    }
+
+    setIsConverting(true);
+    setError("");
+    setGeneratedFavicons([]);
+
+    try {
+      switch (String(toc)) {
+        // Encoders
+        case "PNG-to-Base64":
+        case "JPG-to-Base64":
+        case "WEBP-to-Base64":
+        case "PDF-to-Base64":
+          await encodeToBase64(file.file);
+          break;
+
+        // Decoders
+        case "Base64-to-PNG":
+        case "Base64-to-JPG":
+        case "Base64-to-WEBP":
+        case "Base64-to-PDF":
+          await decodeFromBase64(file.file);
+          break;
+
+        // Data Converters
+        case "CSV-to-JSON":
+          await convertCsvToJson(file.file);
+          break;
+
+        case "JSON-to-CSV":
+          await convertJsonToCsv(file.file);
+          break;
+
+        // Image to SVG Converters
+        case "PNG-to-SVG":
+        case "JPG-to-SVG":
+        case "WEBP-to-SVG":
+          await convertImageToSvg(file.file);
+          break;
+        
+        case "MP4-to-MP3":
+          await convertMp4ToMp3(file.file);
+          break;
+
+        // Favicon Generators
+        case "Image-to-Favicon":
+          await generateFaviconFromImage(file.file);
+          break;
+
+        case "Text-to-Favicon":
+          await generateFaviconFromText();
+          break;
+
+        default:
+          setError("Unknown conversion type");
+          toast.error('Error!', 'Unknown conversion type', { variant: 'accent' })
+      }
+    } catch (err) {
+      console.error('Conversion error:', err);
+      const errorMessage = err instanceof Error ? err.message : "Conversion failed";
+      setError(errorMessage);
+      toast.error('Error!', errorMessage, { variant: 'accent' })
+    } finally {
+      setIsConverting(false);
+    }
+  };
+
+  // ... (keep all existing conversion functions: encodeToBase64, decodeFromBase64, convertCsvToJson, etc.)
+
+  const getMimeType = (format: string | undefined): string => {
+    const mimeTypes: Record<string, string> = {
+      'png': 'image/png',
+      'jpg': 'image/jpeg',
+      'jpeg': 'image/jpeg',
+      'webp': 'image/webp',
+      'pdf': 'application/pdf',
+      'mp4': 'video/mp4',
+      'mp3': 'audio/mpeg',
+      'svg': 'image/svg+xml',
+      'ico': 'image/x-icon',
+      'xml': 'application/xml',
+      'json': 'application/json',
+      'webmanifest': 'application/manifest+json'
+    };
+    return mimeTypes[format || ''] || 'application/octet-stream';
+  };
+
+  const getAcceptAttribute = () => {
+    if (toc === "CSV-to-JSON") {
+      return ".csv,text/csv";
+    }
+    if (toc === "JSON-to-CSV") {
+      return ".json,application/json";
+    }
+    if (toc === "MP4-to-MP3") {
+      return ".mp4,video/mp4";
+    }
+    if (toc?.includes("-to-Base64")) {
+      return "image/*,application/pdf,.png,.jpg,.webp,.pdf";
+    }
+    if (toc?.includes("Base64-to-")) {
+      return ".txt";
+    }
+    if (toc?.includes("-to-SVG")) {
+      return "image/*,.png,.jpg,.jpeg,.webp";
+    }
+    if (toc === "Image-to-Favicon") {
+      return "image/*,.png,.jpg,.jpeg,.webp,.svg";
+    }
+    return "*";
+  };
+
+  const getDescription = () => {
+    if (toc === "CSV-to-JSON") {
+      return "Drop or select a CSV file to convert to JSON format.";
+    }
+    if (toc === "JSON-to-CSV") {
+      return "Drop or select a JSON file to convert to CSV format.";
+    }
+    if (toc === "MP4-to-MP3") {
+      return "Drop or select an MP4 video file to extract audio.";
+    }
+    if (toc?.includes("-to-SVG")) {
+      return "Drop or select an image file to convert to SVG vector format.";
+    }
+    if (toc?.includes("-to-Base64")) {
+      return "Drop or select an image or PDF file to convert to Base64 format.";
+    }
+    if (toc?.includes("Base64-to-")) {
+      return "Drop or select a .txt file containing Base64 data to decode.";
+    }
+    if (toc === "Image-to-Favicon") {
+      return "Drop or select an image to generate favicon files.";
+    }
+    if (toc === "Text-to-Favicon") {
+      return "Create favicon from text with custom styling.";
+    }
+    return "Select a encoder / decoder from the sidebar";
+  };
+
+  const getAcceptedDesc = () => {
+    if (toc === "CSV-to-JSON") {
+      return "Accepts CSV filetype.";
+    }
+    if (toc === "JSON-to-CSV") {
+      return "Accepts JSON filetype.";
+    }
+    if (toc === "MP4-to-MP3") {
+      return "Accepts MP4 filetype.";
+    }
+    if (toc?.includes("-to-SVG")) {
+      return "Accepts PDF, JPG, PNG and WEBP filetypes.";
+    }
+    if (toc?.includes("-to-Base64")) {
+      return "Accepts PDF, JPG, PNG and WEBP filetypes.";
+    }
+    if (toc?.includes("Base64-to-")) {
+      return "Accepts PDF, JPG, PNG and WEBP filetypes.";
+    }
+    if (toc === "Image-to-Favicon") {
+      return "Accepts PNG, JPG, WEBP, and SVG filetypes.";
+    }
+    return "Accepts PDF, JPG, PNG, WEBP, CSV and MP4 filetypes";
+  };
+
+  const getOutputOptions = () => {
+    if (toc === "MP4-to-MP3") {
+      return (
+        <>
+          <SelectItem value="base64">Base64 Audio Data</SelectItem>
+          <SelectItem value="dataURI">Data URI (audio/wav)</SelectItem>
+          <SelectItem value="htmlAudio">HTML Audio Tag</SelectItem>
+          <SelectItem value="download">Download Audio File</SelectItem>
+        </>
+      );
+    }
+    if (toc === "CSV-to-JSON") {
+      return (
+        <>
+          <SelectItem value="pretty">Pretty JSON (formatted)</SelectItem>
+          <SelectItem value="minified">Minified JSON</SelectItem>
+          <SelectItem value="array">JSON Array</SelectItem>
+          <SelectItem value="objects">Separate Objects</SelectItem>
+        </>
+      );
+    }
+    if (toc === "JSON-to-CSV") {
+      return <SelectItem value="csv">Standard CSV</SelectItem>;
+    }
+    if (toc?.includes("Base64")) {
+      return (
+        <>
+          <SelectItem value="plainText">Plain text - just the base64 value</SelectItem>
+          <SelectItem value="dataURI">Data URI - data:content/type;base64</SelectItem>
+          <SelectItem value="htmlIframe">HTML Iframe/Image Tag</SelectItem>
+        </>
+      );
+    }
+    if (toc?.includes("-to-SVG")) {
+      return (
+        <>
+          <SelectItem value="small">Small (4x pixelation)</SelectItem>
+          <SelectItem value="medium">Medium (2x pixelation)</SelectItem>
+          <SelectItem value="large">Large (1x pixelation)</SelectItem>
+          <SelectItem value="original">Original Size</SelectItem>
+        </>
+      );
+    }
+    if (toc === "Image-to-Favicon" || toc === "Text-to-Favicon") {
+      return (
+        <>
+          <SelectItem value="ico">ICO Format (All sizes)</SelectItem>
+          <SelectItem value="png16">PNG 16x16</SelectItem>
+          <SelectItem value="png32">PNG 32x32</SelectItem>
+          <SelectItem value="png180">PNG 180x180 (Apple Touch)</SelectItem>
+          <SelectItem value="png192">PNG 192x192</SelectItem>
+          <SelectItem value="png512">PNG 512x512</SelectItem>
+          <SelectItem value="allFormats">All Formats Package</SelectItem>
+        </>
+      );
+    }
+
+    return null;
+  };
+
+  // New Favicon Generation Functions
+  const generateFaviconFromImage = async (uploadedFile: File) => {
+    return new Promise<void>((resolve, reject) => {
+      const img = new Image();
+      const reader = new FileReader();
+
+      reader.onload = () => {
+        img.onload = () => {
+          try {
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            
+            if (!ctx) {
+              reject(new Error("Failed to get canvas context"));
+              return;
+            }
+
+            const sizes = [
+              { size: 16, name: 'favicon-16x16.png' },
+              { size: 32, name: 'favicon-32x32.png' },
+              { size: 180, name: 'apple-touch-icon.png' },
+              { size: 192, name: 'android-chrome-192x192.png' },
+              { size: 512, name: 'android-chrome-512x512.png' }
+            ];
+
+            const favicons = [];
+
+            // Generate each size
+            sizes.forEach(({ size, name }) => {
+              canvas.width = size;
+              canvas.height = size;
+              
+              // Clear canvas
+              ctx.fillStyle = '#ffffff';
+              ctx.fillRect(0, 0, size, size);
+              
+              // Draw image centered and scaled to fit
+              const scale = Math.min(size / img.width, size / img.height);
+              const scaledWidth = img.width * scale;
+              const scaledHeight = img.height * scale;
+              const offsetX = (size - scaledWidth) / 2;
+              const offsetY = (size - scaledHeight) / 2;
+              
+              ctx.drawImage(img, offsetX, offsetY, scaledWidth, scaledHeight);
+              
+              const dataUrl = canvas.toDataURL('image/png');
+              favicons.push({
+                name,
+                size: `${size}x${size}`,
+                dataUrl,
+                format: 'png',
+                blob: dataURLtoBlob(dataUrl)
+              });
+            });
+
+            // Generate ICO file
+            const icoCanvas = document.createElement('canvas');
+            const icoCtx = icoCanvas.getContext('2d');
+            if (icoCtx) {
+              icoCanvas.width = 32;
+              icoCanvas.height = 32;
+              icoCtx.drawImage(img, 0, 0, 32, 32);
+              const icoDataUrl = icoCanvas.toDataURL('image/x-icon');
+              favicons.push({
+                name: 'favicon.ico',
+                size: '32x32',
+                dataUrl: icoDataUrl,
+                format: 'ico',
+                blob: dataURLtoBlob(icoDataUrl)
+              });
+            }
+
+            setGeneratedFavicons(favicons);
+            
+            // Generate output based on selected format
+            let result = "";
+            switch (output) {
+              case "ico":
+                result = favicons.find(f => f.name === 'favicon.ico')?.dataUrl || "";
+                break;
+              case "png16":
+                result = favicons.find(f => f.name === 'favicon-16x16.png')?.dataUrl || "";
+                break;
+              case "png32":
+                result = favicons.find(f => f.name === 'favicon-32x32.png')?.dataUrl || "";
+                break;
+              case "png180":
+                result = favicons.find(f => f.name === 'apple-touch-icon.png')?.dataUrl || "";
+                break;
+              case "png192":
+                result = favicons.find(f => f.name === 'android-chrome-192x192.png')?.dataUrl || "";
+                break;
+              case "png512":
+                result = favicons.find(f => f.name === 'android-chrome-512x512.png')?.dataUrl || "";
+                break;
+              case "allFormats":
+                result = generateFaviconPackage(favicons);
+                break;
+              default:
+                result = favicons.find(f => f.name === 'favicon.ico')?.dataUrl || "";
+            }
+
+            setConverted(result);
+            resolve();
+          } catch (err) {
+            reject(new Error("Failed to generate favicon: " + (err as Error).message));
+          }
+        };
+
+        img.onerror = () => reject(new Error("Failed to load image"));
+        img.src = reader.result as string;
+      };
+
+      reader.onerror = () => reject(new Error("Failed to read image file"));
+      reader.readAsDataURL(uploadedFile);
+    });
+  };
+
+  const generateFaviconFromText = async () => {
+    return new Promise<void>((resolve) => {
+      try {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+        
+        if (!ctx) {
+          throw new Error("Failed to get canvas context");
+        }
+
+        const sizes = [
+          { size: 16, name: 'favicon-16x16.png' },
+          { size: 32, name: 'favicon-32x32.png' },
+          { size: 180, name: 'apple-touch-icon.png' },
+          { size: 192, name: 'android-chrome-192x192.png' },
+          { size: 512, name: 'android-chrome-512x512.png' }
+        ];
+
+        const favicons = [];
+
+        // Generate each size
+        sizes.forEach(({ size, name }) => {
+          canvas.width = size;
+          canvas.height = size;
+          
+          // Fill background
+          ctx.fillStyle = backgroundColor;
+          ctx.fillRect(0, 0, size, size);
+          
+          // Draw text
+          ctx.fillStyle = textColor;
+          ctx.font = `bold ${fontSize * (size / 32)}px Arial`;
+          ctx.textAlign = 'center';
+          ctx.textBaseline = 'middle';
+          
+          const maxWidth = size * 0.8;
+          const text = textContent.length > 2 ? textContent.substring(0, 2) : textContent;
+          
+          ctx.fillText(text, size / 2, size / 2, maxWidth);
+          
+          const dataUrl = canvas.toDataURL('image/png');
+          favicons.push({
+            name,
+            size: `${size}x${size}`,
+            dataUrl,
+            format: 'png',
+            blob: dataURLtoBlob(dataUrl)
+          });
+        });
+
+        // Generate ICO file
+        canvas.width = 32;
+        canvas.height = 32;
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(0, 0, 32, 32);
+        ctx.fillStyle = textColor;
+        ctx.font = `bold ${fontSize}px Arial`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(textContent.length > 2 ? textContent.substring(0, 2) : textContent, 16, 16, 25);
+        
+        const icoDataUrl = canvas.toDataURL('image/x-icon');
+        favicons.push({
+          name: 'favicon.ico',
+          size: '32x32',
+          dataUrl: icoDataUrl,
+          format: 'ico',
+          blob: dataURLtoBlob(icoDataUrl)
+        });
+
+        setGeneratedFavicons(favicons);
+        
+        // Generate output based on selected format
+        let result = "";
+        switch (output) {
+          case "ico":
+            result = favicons.find(f => f.name === 'favicon.ico')?.dataUrl || "";
+            break;
+          case "png16":
+            result = favicons.find(f => f.name === 'favicon-16x16.png')?.dataUrl || "";
+            break;
+          case "png32":
+            result = favicons.find(f => f.name === 'favicon-32x32.png')?.dataUrl || "";
+            break;
+          case "png180":
+            result = favicons.find(f => f.name === 'apple-touch-icon.png')?.dataUrl || "";
+            break;
+          case "png192":
+            result = favicons.find(f => f.name === 'android-chrome-192x192.png')?.dataUrl || "";
+            break;
+          case "png512":
+            result = favicons.find(f => f.name === 'android-chrome-512x512.png')?.dataUrl || "";
+            break;
+          case "allFormats":
+            result = generateFaviconPackage(favicons);
+            break;
+          default:
+            result = favicons.find(f => f.name === 'favicon.ico')?.dataUrl || "";
+        }
+
+        setConverted(result);
+        resolve();
+      } catch (err) {
+        throw new Error("Failed to generate text favicon: " + (err as Error).message);
+      }
+    });
+  };
+
+  const generateFaviconPackage = (favicons: any[]) => {
+    let packageContent = "// Favicon Package\n";
+    packageContent += "// Generated by Catalyst Converter\n\n";
+    
+    // HTML code
+    if (includeHTML) {
+      packageContent += "<!-- HTML Head Section -->\n";
+      favicons.forEach(favicon => {
+        if (favicon.name === 'favicon.ico') {
+          packageContent += `<link rel="icon" href="favicon.ico" type="image/x-icon">\n`;
+        } else if (favicon.name === 'apple-touch-icon.png') {
+          packageContent += `<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">\n`;
+        } else if (favicon.name.includes('android-chrome')) {
+          // Will be referenced in manifest
+        } else {
+          const size = favicon.size;
+          packageContent += `<link rel="icon" type="image/png" href="${favicon.name}" sizes="${size}">\n`;
+        }
+      });
+      packageContent += '\n';
+    }
+
+    // Manifest file
+    if (includeManifest) {
+      packageContent += "// webmanifest\n";
+      const manifest = {
+        name: siteName,
+        short_name: siteName.substring(0, 12),
+        theme_color: themeColor,
+        background_color: "#ffffff",
+        display: "standalone",
+        icons: favicons
+          .filter(f => f.name.includes('android-chrome'))
+          .map(f => ({
+            src: `/${f.name}`,
+            sizes: f.size,
+            type: "image/png"
+          }))
+      };
+      packageContent += JSON.stringify(manifest, null, 2);
+      packageContent += '\n\n';
+    }
+
+    // Base64 data for each favicon
+    packageContent += "// Base64 Encoded Favicons\n";
+    favicons.forEach((favicon, index) => {
+      const base64Data = favicon.dataUrl.split(',')[1];
+      packageContent += `// ${favicon.name} (${favicon.size})\n`;
+      packageContent += `const favicon${index + 1} = '${base64Data}';\n\n`;
+    });
+
+    return packageContent;
+  };
+
+  const dataURLtoBlob = (dataUrl: string) => {
+    const arr = dataUrl.split(',');
+    const mime = arr[0].match(/:(.*?);/)[1];
+    const bstr = atob(arr[1]);
+    let n = bstr.length;
+    const u8arr = new Uint8Array(n);
+    while (n--) {
+      u8arr[n] = bstr.charCodeAt(n);
+    }
+    return new Blob([u8arr], { type: mime });
+  };
+
+  const downloadFavicon = (favicon: any) => {
+    const url = URL.createObjectURL(favicon.blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = favicon.name;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+    toast.success('Downloaded', `${favicon.name}`, { variant: 'accent' });
+  };
+
+  const getOutputFilename = () => {
+    const timestamp = new Date().toISOString().slice(0, 10);
+
+    switch (toc) {
+      // Favicon generators
+      case "Image-to-Favicon":
+      case "Text-to-Favicon":
+        if (output === "ico") return "favicon.ico";
+        if (output === "png16") return "favicon-16x16.png";
+        if (output === "png32") return "favicon-32x32.png";
+        if (output === "png180") return "apple-touch-icon.png";
+        if (output === "png192") return "android-chrome-192x192.png";
+        if (output === "png512") return "android-chrome-512x512.png";
+        if (output === "allFormats") return "favicon-package.txt";
+        return `favicon-${timestamp}.ico`;
+
+      // Keep existing cases...
+      // Encoders to Base64
+      case "PNG-to-Base64":
+      case "JPG-to-Base64":
+      case "WEBP-to-Base64":
+      case "PDF-to-Base64":
+        return `${file.file?.name?.split('.')[0] || 'converted'}-base64.txt`;
+
+      // Decoders from Base64
+      case "Base64-to-PNG":
+        return `decoded-image-${timestamp}.png`;
+      case "Base64-to-JPG":
+        return `decoded-image-${timestamp}.jpg`;
+      case "Base64-to-WEBP":
+        return `decoded-image-${timestamp}.webp`;
+      case "Base64-to-PDF":
+        return `decoded-document-${timestamp}.pdf`;
+
+      // Data format converters
+      case "CSV-to-JSON":
+        return `${file.file?.name?.replace('.csv', '') || 'converted'}.json`;
+      case "JSON-to-CSV":
+        return `${file.file?.name?.replace('.json', '') || 'converted'}.csv`;
+
+      // Image to SVG converters
+      case "PNG-to-SVG":
+      case "JPG-to-SVG":
+      case "WEBP-to-SVG":
+        return `${file.file?.name?.split('.')[0] || 'converted'}.svg`;
+
+      // Audio converter
+      case "MP4-to-MP3":
+        if (output === "download") {
+          return `${file.file?.name?.replace('.mp4', '') || 'converted'}.webm`;
+        }
+        return `${file.file?.name?.replace('.mp4', '') || 'converted'}-audio.txt`;
+
+      default:
+        return `converted-${timestamp}.txt`;
+    }
+  };
+
+  const shouldDisplay =
+    String(toc) === "MP4-to-MP3" ||
+    String(toc) === "JSON-to-CSV" ||
+    String(toc) === "CSV-to-JSON" ||
+    String(toc)?.includes("Base64-to-") ||
+    String(toc)?.includes("-to-SVG") ||
+    String(toc)?.includes("-to-Base64") ||
+    String(toc) === "Image-to-Favicon" ||
+    String(toc) === "Text-to-Favicon";
+  
+  const displaySelect =
+    String(toc) === "JSON-to-CSV" ||
+    String(toc) === "CSV-to-JSON" ||
+    String(toc)?.includes("Base64-to-") ||
+    String(toc)?.includes("-to-SVG") ||
+    String(toc)?.includes("-to-Base64") ||
+    String(toc) === "Image-to-Favicon" ||
+    String(toc) === "Text-to-Favicon";
+
+  const objects = converted ? [{ filename: getOutputFilename(), code: converted }] : [];
+
+  if (isConverting) {
+    return (
+      <div className='flex flex-col items-center justify-center h-[50vh]' >
+        <SpinnerV4 title="Converting your data..." subtitle="This will only take a moment" size="lg" />
+      </div>
+    )
+  } else {
+    return (
+      <section className="py-16">
+        <div className="container mx-auto">
+          <div className="mx-auto max-w-2xl">
+            {!shouldDisplay && (
+              <div className="mb-12 text-center">
+                <h2 className="mb-4 text-3xl font-bold lg:text-4xl">
+                  Converter
+                </h2>
+                <p className="text-muted-foreground text-lg">
+                  Select a encoder / decoder from the sidebar
+                </p>
+              </div>
+            )}
+            {shouldDisplay && (
+              <Card className="p-6 lg:p-8">
+                <div className="space-y-6">
+                  {/* Text-to-Favicon specific controls */}
+                  {toc === "Text-to-Favicon" && (
+                    <div className="space-y-4">
+                      <div className="grid grid-cols-2 gap-4">
+                        <Field>
+                          <FieldLabel>Text Content</FieldLabel>
+                          <Input
+                            value={textContent}
+                            onChange={(e) => setTextContent(e.target.value)}
+                            maxLength={2}
+                            placeholder="C"
+                          />
+                          <FieldDescription>1-2 characters recommended</FieldDescription>
+                        </Field>
+                        <Field>
+                          <FieldLabel>Font Size</FieldLabel>
+                          <div className="flex items-center gap-2">
+                            <Input
+                              type="number"
+                              value={fontSize}
+                              onChange={(e) => setFontSize(Number(e.target.value))}
+                              min={8}
+                              max={64}
+                            />
+                            <span className="text-sm text-muted-foreground">px</span>
+                          </div>
+                        </Field>
+                      </div>
+                      <div className="grid grid-cols-2 gap-4">
+                        <Field>
+                          <FieldLabel>Background Color</FieldLabel>
+                          <div className="flex items-center gap-2">
+                            <Input
+                              type="color"
+                              value={backgroundColor}
+                              onChange={(e) => setBackgroundColor(e.target.value)}
+                              className="w-full h-10"
+                            />
+                            <Input
+                              value={backgroundColor}
+                              onChange={(e) => setBackgroundColor(e.target.value)}
+                              className="w-32"
+                            />
+                          </div>
+                        </Field>
+                        <Field>
+                          <FieldLabel>Text Color</FieldLabel>
+                          <div className="flex items-center gap-2">
+                            <Input
+                              type="color"
+                              value={textColor}
+                              onChange={(e) => setTextColor(e.target.value)}
+                              className="w-full h-10"
+                            />
+                            <Input
+                              value={textColor}
+                              onChange={(e) => setTextColor(e.target.value)}
+                              className="w-32"
+                            />
+                          </div>
+                        </Field>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Common file upload section */}
+                  {toc !== "Text-to-Favicon" && (
+                    <div className="space-y-2">
+                      <div className="space-y-3">
+                        <ExternalDropZone
+                          title={getDescription()}
+                          description={getAcceptedDesc()}
+                          hint="Maximum file size: 10MB"
+                          multiple={false}
+                          accept={getAcceptAttribute()}
+                          maxSize={10 * 1024 * 1024}
+                          onFilesSelect={handleFileSelect}
+                          onFilesRemove={handleFileRemove}
+                        />
+                        {selectedFile?.name && (
+                          <div className="flex flex-col justify-center space-y-4">
+                            <div className="border-input flex items-center justify-between rounded-lg border p-4">
+                              <div className="flex items-center gap-3">
+                                <div className="bg-primary/10 text-primary flex h-10 w-10 items-center justify-center rounded">
+                                  <File className="h-5 w-5" />
+                                </div>
+                                <div>
+                                  <p className="text-sm font-medium">
+                                    {selectedFile.name}
+                                  </p>
+                                  <p className="text-muted-foreground text-xs">
+                                    {formatFileSize(selectedFile.size)}
+                                  </p>
+                                </div>
+                              </div>
+                              <Button type="button" variant="ghost" size="icon" onClick={handleFileRemove}  >
+                                <X className="h-4 w-4" />
+                              </Button>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Output format selection */}
+                  {displaySelect && (selectedFile || toc === "Text-to-Favicon") && (
+                    <div className="space-y-2">
+                      <Field>
+                        <FieldLabel>Output Format</FieldLabel>
+                        <Select value={output} onValueChange={handleChange}>
+                          <SelectTrigger>
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {getOutputOptions()}
+                          </SelectContent>
+                        </Select>
+                        <FieldDescription>Choose your preferred output format</FieldDescription>
+                        {error && <FieldError>{error}</FieldError>}
+                      </Field>
+                    </div>
+                  )}
+
+                  {/* Additional options for favicon generation */}
+                  {(toc === "Image-to-Favicon" || toc === "Text-to-Favicon") && output === "allFormats" && (
+                    <div className="space-y-4">
+                      <Field>
+                        <FieldLabel>Site Name</FieldLabel>
+                        <Input
+                          value={siteName}
+                          onChange={(e) => setSiteName(e.target.value)}
+                          placeholder="My Website"
+                        />
+                      </Field>
+                      <div className="grid grid-cols-2 gap-4">
+                        <Field>
+                          <FieldLabel>Theme Color</FieldLabel>
+                          <div className="flex items-center gap-2">
+                            <Input
+                              type="color"
+                              value={themeColor}
+                              onChange={(e) => setThemeColor(e.target.value)}
+                              className="w-full h-10"
+                            />
+                            <Input
+                              value={themeColor}
+                              onChange={(e) => setThemeColor(e.target.value)}
+                              className="w-32"
+                            />
+                          </div>
+                        </Field>
+                      </div>
+                      <div className="space-y-3">
+                        <div className="flex items-center justify-between">
+                          <FieldLabel>Include Additional Files</FieldLabel>
+                        </div>
+                        <div className="grid grid-cols-2 gap-4">
+                          <div className="flex items-center space-x-2">
+                            <Switch
+                              checked={includeHTML}
+                              onCheckedChange={setIncludeHTML}
+                            />
+                            <Label>HTML Code</Label>
+                          </div>
+                          <div className="flex items-center space-x-2">
+                            <Switch
+                              checked={includeManifest}
+                              onCheckedChange={setIncludeManifest}
+                            />
+                            <Label>Web Manifest</Label>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {/* Convert button */}
+                  {(selectedFile || toc === "Text-to-Favicon") && (
+                    <Button variant='styled' className='w-full' onClick={convertFile}>
+                      {isConverting ? "Generating..." : toc === "Text-to-Favicon" ? "Generate Favicon" : "Convert"}
+                    </Button>
+                  )}
+                </div>
+              </Card>
+            )}
+
+            {/* Generated favicons preview */}
+            {generatedFavicons.length > 0 && (
+              <Card className="p-6 mt-6">
+                <h3 className="text-lg font-semibold mb-4">Generated Favicons Preview</h3>
+                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4">
+                  {generatedFavicons.map((favicon, index) => (
+                    <div key={index} className="flex flex-col items-center space-y-2">
+                      <div className="w-20 h-20 flex items-center justify-center bg-gray-100 rounded-lg border">
+                        <img
+                          src={favicon.dataUrl}
+                          alt={favicon.name}
+                          className="max-w-full max-h-full"
+                        />
+                      </div>
+                      <div className="text-center">
+                        <p className="text-sm font-medium">{favicon.name}</p>
+                        <p className="text-xs text-muted-foreground">{favicon.size}</p>
+                      </div>
+                      <div className="flex gap-2">
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => {
+                            navigator.clipboard.writeText(favicon.dataUrl);
+                            toast.success('Copied', `${favicon.name}`, { variant: 'accent' });
+                          }}
+                        >
+                          <Copy className="h-3 w-3 mr-1" />
+                          Copy
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => downloadFavicon(favicon)}
+                        >
+                          <Download className="h-3 w-3 mr-1" />
+                          Save
+                        </Button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+            )}
+
+            {/* Output code block */}
+            {converted !== null && (<CodeBlockSection data={objects} />)}
+          </div>
+        </div>
+      </section>
+    );
+  }
+}
+
+