\n {getStatusText(file.status)}\n {file.progress}%\n

\n );\n };\n\n const renderActions = () => {\n return (\n

\n {file.status === FileStatus.ERROR && onRetry && (\n onRetry(file.id)}\n className=\"text-blue-600 hover:text-blue-800 text-sm\"\n title=\"Retry upload\"\n >\n 🔄\n \n )}\n \n {(file.status === FileStatus.UPLOADING || file.status === FileStatus.QUEUED) && onCancel && (\n onCancel(file.id)}\n className=\"text-red-600 hover:text-red-800 text-sm\"\n title=\"Cancel upload\"\n >\n ⏹️\n \n )}\n \n {(file.status === FileStatus.IDLE || file.status === FileStatus.ERROR || file.status === FileStatus.CANCELLED) && (\n onRemove(file.id)}\n className=\"text-red-600 hover:text-red-800 text-sm\"\n title=\"Remove file\"\n >\n 🗑️\n \n )}\n

\n );\n };\n\n if (viewMode === 'grid') {\n return (\n

\n {onSelect && (\n

\n onSelect(file.id, e.target.checked)}\n className=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n />\n {renderActions()}\n

\n )}\n \n

{getFileIcon(file.file.type)}

\n {file.file.name}\n

\n {formatFileSize(file.file.size)}\n

\n \n

\n {getStatusText(file.status)}\n

\n \n {file.error && (\n

\n {file.error}\n

\n )}\n \n {renderProgressBar()}\n

\n );\n }\n\n // List view\n return (\n

\n {onSelect && (\n onSelect(file.id, e.target.checked)}\n className=\"rounded border-gray-300 text-blue-600 focus:ring-blue-500\"\n />\n )}\n \n

{getFileIcon(file.file.type)}

\n \n

\n {file.file.name}\n

\n {formatFileSize(file.file.size)}\n

\n {file.error && (\n

\n {file.error}\n

\n )}\n {renderProgressBar()}\n

\n \n

\n \n {getStatusText(file.status)}\n \n {renderActions()}\n

\n );\n};","deleted","label",[167,168,169,149],"frontend","components","upload","permalink","https://www.val.town/x/MrGo2/untitled-3286/code/frontend/components/upload/FileItem.tsx","extension","actionData","errors"]