Almost all sections with mock data

2026-02-16 14:41:01 -06:00
parent 1761dcdfe8
commit 4235f640d9
43 changed files with 2782 additions and 4 deletions
--- a/src/components/files/FileExplorerContainer.tsx
+++ b/src/components/files/FileExplorerContainer.tsx
@@ -0,0 +1,91 @@
+'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>
+  )
+}