Componente Visor de archivos
Componente de visor de archivos responsivo con soporte para modo oscuro
Código HTML
<div class="container mx-auto p-6">
<!-- File Header -->
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">File Viewer</h2>
<div class="flex items-center space-x-4">
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
<button class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
</button>
</div>
</div>
<!-- File List -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
<!-- File Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="p-4">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-5m3 5v-5m3 5v-5M9 8h6m-be 4h6m-3-4a3 3 0 01-3-3V4a3 3 0 013-3h2a3 3 0 013 3v1a3 3 0 01-3 3h-2a3 3 0 01-3-3z" />
</svg>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Document.pdf</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">1.2 MB</p>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
<button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Download</button>
</div>
</div>
<!-- File Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="p-4">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Image.png</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">800 KB</p>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
<button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">View</button>
</div>
</div>
<!-- File Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="p-4">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-yellow-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-7.072a9 9 0 010 12.728m-9.193-2.829a5 5 0 010-7.072M6.343 4.515a9 9 0 010 12.728M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Audio.mp3</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">3.5 MB</p>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
<button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Listen</button>
</div>
</div>
<!-- File Card -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="p-4">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 mr-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h18M3 16h18" />
</svg>
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Video.mp4</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">15 MB</p>
</div>
</div>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 flex justify-end">
<button class="text-sm text-blue-500 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-600 focus:outline-none">Watch</button>
</div>
</div>
</div>
</div>
Componentes relacionados
Componente Visor de archivos
Un componente de visor de archivos complejo y sensible con un diseño inspirado en la Bauhaus que utiliza colores análogos, adecuado para bolsas de trabajo y plataformas de desarrollo profesional. Incluye soporte para modo oscuro.
Componente Visor de archivos
Un componente de visor de archivos responsivo diseñado con los principios de Material Design, con soporte para modo oscuro y efectos responsivos.
Componente Visor de archivos
Un componente de visor de archivos responsivo con una estética industrial y de materiales crudos, que implementa neutros cálidos y soporte de modo oscuro para el consumo de contenido.