92 lines
3.1 KiB
TypeScript
92 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { useRef } from 'react'
|
|
import { FolderOpen, Upload, RefreshCw } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
import type { FileItem } from './FileRow'
|
|
import FileTable from './FileTable'
|
|
|
|
interface FileExplorerContainerProps {
|
|
selectedDeviceName: string | null
|
|
currentPath: string
|
|
files: FileItem[]
|
|
onFolderClick?: (name: string) => void
|
|
onRefresh?: () => void
|
|
onUpload?: () => void
|
|
}
|
|
|
|
export default function FileExplorerContainer({
|
|
selectedDeviceName,
|
|
currentPath,
|
|
files,
|
|
onFolderClick,
|
|
onRefresh,
|
|
onUpload,
|
|
}: FileExplorerContainerProps) {
|
|
const pathRef = useRef<HTMLDivElement>(null)
|
|
const hasDevice = !!selectedDeviceName
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex h-[520px] min-h-[320px] flex-col overflow-hidden rounded-xl',
|
|
'border border-white/10 bg-gradient-to-b from-dark-300/90 to-dark-400/90',
|
|
'shadow-lg'
|
|
)}
|
|
>
|
|
<div className="flex shrink-0 flex-wrap items-center justify-between gap-3 border-b border-white/10 bg-dark-200/80 px-4 py-3">
|
|
<div className="flex min-w-0 flex-1 items-center gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onUpload}
|
|
disabled={!hasDevice}
|
|
className="flex items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-white/5 hover:text-gray-200 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
<Upload className="h-4 w-4" />
|
|
Subir
|
|
</button>
|
|
<div
|
|
ref={pathRef}
|
|
className="min-w-0 flex-1 overflow-x-auto rounded-lg border border-white/10 bg-dark-300/80 px-3 py-2 font-mono text-sm text-gray-400"
|
|
>
|
|
{currentPath}
|
|
</div>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={onRefresh}
|
|
disabled={!hasDevice}
|
|
className="flex items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-sm text-gray-400 transition-colors hover:bg-white/5 hover:text-gray-200 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
<RefreshCw className="h-4 w-4" />
|
|
Actualizar
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onUpload}
|
|
disabled={!hasDevice}
|
|
className="flex items-center gap-2 rounded-lg bg-cyan-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-cyan-500 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
<Upload className="h-4 w-4" />
|
|
Subir
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-1 flex-col overflow-hidden">
|
|
{!hasDevice ? (
|
|
<div className="flex flex-1 flex-col items-center justify-center gap-4 text-center">
|
|
<FolderOpen className="h-16 w-16 text-gray-600" />
|
|
<p className="text-gray-500">
|
|
Selecciona un dispositivo para explorar archivos
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<FileTable files={files} onFolderClick={onFolderClick} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|