Componente Visualizzatore file
Componente visualizzatore file reattivo con supporto per la modalità oscura
Codice HTML
<div class="bg-gray-100 dark:bg-gray-800 min-h-screen flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-700 shadow-lg rounded-lg p-6 w-full max-w-sm">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">File Viewer</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-500 dark:text-gray-300" 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>
</div>
<div class="space-y-4">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-blue-500 dark:text-blue-400" 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 0015.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Document.pdf</p>
<p class="text-xs text-gray-500 dark:text-gray-300">1.2 MB</p>
</div>
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-green-500 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Image.png</p>
<p class="text-xs text-gray-500 dark:text-gray-300">800 KB</p>
</div>
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
</button>
</div>
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-red-500 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 012-2h2a2 2 0 012 2v6m3 0H9m1a1 1 0 00-1 1v2m1-3h0a2 2 0 012-2h2a2 2 0 012 2h0m-5-13V5a2 2 0 012-2h2a2 2 0 012 2v2M6 19a2 2 0 002-2V5a2 2 0 00-2-2H4a2 2 0 00-2 2v12a2 2 0 002 2h2z" />
</svg>
</div>
<div class="flex-1">
<p class="text-sm font-medium text-gray-900 dark:text-white">Archive.zip</p>
<p class="text-xs text-gray-500 dark:text-gray-300">5.5 MB</p>
</div>
<button class="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
</button>
</div>
</div>
</div>
</div>Componenti correlati
Componente Visualizzatore file
Un componente visualizzatore di file reattivo progettato per siti Web di e-commerce in modalità oscura con una combinazione di colori monocromatica. Include funzionalità interattive come il caricamento e l'anteprima dei file.
Componente Visualizzatore file
Un componente visualizzatore di file reattivo con i principi di Material Design utilizzando Tailwind CSS, con supporto per il tema scuro.
Componente Visualizzatore file
Un componente visualizzatore di file reattivo progettato in uno stile brutalista, con supporto per temi scuri e utilizzando Tailwind CSS.