File size: 3,820 Bytes
c5ef85d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { FileText, Download, ArrowLeft, FolderOpen } from 'lucide-react';
import { motion } from 'framer-motion';
const FileViewer = ({ folderId, onBack }) => {
const [files, setFiles] = useState([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchFiles = async () => {
try {
const response = await axios.get(`http://localhost:8000/processed/${folderId}`);
setFiles(response.data);
} catch (error) {
console.error("Failed to fetch files", error);
} finally {
setLoading(false);
}
};
if (folderId) fetchFiles();
}, [folderId]);
const handleDownload = (path, filename) => {
// Trigger download
const link = document.createElement('a');
link.href = `http://localhost:8000/${path}`;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
link.parentNode.removeChild(link);
};
if (loading) {
return <div className="text-gray-400 text-center py-8">Loading files...</div>;
}
return (
<div className="space-y-4">
<div className="flex items-center space-x-2 text-gray-300 mb-4">
<button
onClick={onBack}
className="p-2 hover:bg-gray-800 rounded-full transition-colors"
title="Back to folders"
>
<ArrowLeft className="w-5 h-5" />
</button>
<FolderOpen className="w-5 h-5 text-blue-400" />
<h3 className="font-semibold text-lg">{folderId}</h3>
</div>
<div className="grid gap-3">
{files.length === 0 ? (
<div className="text-gray-500 text-center py-4">No files found in this folder.</div>
) : (
files.map((file) => (
<motion.div
key={file.name}
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
className="flex items-center justify-between p-3 bg-gray-800/40 border border-gray-700/50 rounded-lg hover:bg-gray-800/60 transition-colors group"
>
<div className="flex items-center space-x-3 overflow-hidden">
<div className="p-2 bg-gray-700/50 rounded-lg text-blue-400">
<FileText className="w-5 h-5" />
</div>
<div className="min-w-0">
<p className="text-sm font-medium text-gray-200 truncate">{file.name}</p>
<p className="text-xs text-gray-500">{(file.size / 1024).toFixed(1)} KB</p>
</div>
</div>
<button
onClick={() => handleDownload(file.path, file.name)}
className="p-2 text-gray-400 hover:text-blue-400 hover:bg-blue-400/10 rounded-lg transition-all opacity-0 group-hover:opacity-100"
title="Download"
>
<Download className="w-5 h-5" />
</button>
</motion.div>
))
)}
</div>
</div>
);
};
export default FileViewer;
|