\n \n Split Type\n \n setSettings({...settings, splitType: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n

\n {settings.splitType === 'range' && (\n

\n \n Page Ranges (e.g., 1-3,5,7-9)\n \n setSettings({...settings, pageRanges: e.target.value})}\n placeholder=\"1-3,5,7-9\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n )}\n

\n );\n\n case 'pdf-to-images':\n return (\n

\n \n Output Format\n \n setSettings({...settings, outputFormat: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n

\n \n Quality: {settings.quality || 90}%\n \n setSettings({...settings, quality: parseInt(e.target.value)})}\n className=\"w-full\"\n />\n

\n );\n\n case 'compress':\n return (\n

\n \n Compression Level\n \n setSettings({...settings, compressionLevel: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n

\n );\n\n case 'watermark':\n return (\n

\n \n Watermark Text\n \n setSettings({...settings, watermarkText: e.target.value})}\n placeholder=\"Enter watermark text\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n Position\n \n setSettings({...settings, watermarkPosition: e.target.value})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n \n \n

\n \n Opacity: {settings.watermarkOpacity || 50}%\n \n setSettings({...settings, watermarkOpacity: parseInt(e.target.value)})}\n className=\"w-full\"\n />\n

\n );\n\n case 'rotate':\n return (\n

\n \n Rotation Angle\n \n setSettings({...settings, rotationAngle: parseInt(e.target.value)})}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n

\n );\n\n case 'protect':\n return (\n

\n \n Password\n \n setSettings({...settings, password: e.target.value})}\n placeholder=\"Enter password\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n );\n\n case 'unlock':\n return (\n

\n \n Current Password\n \n setSettings({...settings, password: e.target.value})}\n placeholder=\"Enter current password\"\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n );\n\n default:\n return null;\n }\n };\n\n const downloadFile = async (url: string, filename: string) => {\n try {\n const response = await fetch(url);\n const blob = await response.blob();\n const downloadUrl = window.URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = downloadUrl;\n a.download = filename;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n window.URL.revokeObjectURL(downloadUrl);\n } catch (error) {\n console.error('Download failed:', error);\n }\n };\n\n return (\n

\n Processing Options\n

\n\n {/* Settings */}\n

\n {renderSettings()}\n

\n\n {/* Process Button */}\n

\n \n {isProcessing ? (\n

\n Processing...\n

\n ) : (\n `Process ${files.length} file${files.length > 1 ? 's' : ''}`\n )}\n \n

\n\n {/* Results */}\n {result && (\n

\n {result.success ? (\n

\n ✅\n Processing completed successfully!\n

\n {result.downloadUrl && (\n downloadFile(result.downloadUrl, result.fileName || 'processed-file')}\n className=\"inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500\"\n >\n \n Download Result\n \n )}\n {result.message && (\n

{result.message}

\n )}\n

\n ) : (\n

\n ❌\n Processing failed\n

{result.error || 'An unknown error occurred'}

\n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/pro909/pdf/code/frontend/components/ProcessingArea.tsx","extension","actionData","errors"]