File size: 3,818 Bytes
540f559 |
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 |
import React from 'react';
import { RemoteFile } from '../types';
import { File, Eye, Download, Loader2, Database } from 'lucide-react';
interface RemoteFileListProps {
files: RemoteFile[];
isLoading: boolean;
onPreview: (file: RemoteFile) => void;
}
export const RemoteFileList: React.FC<RemoteFileListProps> = ({ files, isLoading, onPreview }) => {
if (isLoading) {
return (
<div className="flex flex-col items-center justify-center p-8 bg-white rounded-xl shadow-sm border border-gray-100 h-64">
<Loader2 className="w-8 h-8 text-blue-500 animate-spin mb-3" />
<p className="text-gray-500 font-medium">Fetching dataset from Hugging Face...</p>
</div>
);
}
if (files.length === 0) {
return (
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-8 text-center">
<div className="bg-gray-100 p-3 rounded-full w-fit mx-auto mb-3">
<Database className="w-6 h-6 text-gray-400" />
</div>
<h3 className="text-gray-900 font-medium">No files found</h3>
<p className="text-gray-500 text-sm mt-1">The repository seems empty or files are loading.</p>
</div>
);
}
return (
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<div className="px-6 py-4 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
<h3 className="font-semibold text-gray-800 flex items-center gap-2">
<Database className="w-4 h-4 text-blue-500" />
Server Files ({files.length})
</h3>
</div>
<div className="max-h-[400px] overflow-y-auto divide-y divide-gray-100">
{files.map((file) => (
<div key={file.path} className="px-6 py-3 hover:bg-blue-50/50 transition-colors flex items-center justify-between group">
<div className="flex items-center gap-3 min-w-0">
<File className="w-4 h-4 text-gray-400" />
<div className="min-w-0">
<p className="text-sm font-medium text-gray-700 truncate" title={file.path}>
{file.path}
</p>
<p className="text-xs text-gray-400">
{(file.size / 1024).toFixed(1)} KB
</p>
</div>
</div>
<div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button
onClick={() => onPreview(file)}
className="p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-100 rounded-lg transition-colors"
title="Preview File"
>
<Eye className="w-4 h-4" />
</button>
<a
href={file.url}
target="_blank"
rel="noopener noreferrer"
className="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
title="Open on Hugging Face"
>
<Download className="w-4 h-4" />
</a>
</div>
</div>
))}
</div>
</div>
);
}; |