Datei-Viewer-Komponente
Eine Dateibetrachterkomponente im brutalistischen Stil mit responsivem Design und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.
HTML-Code
<div class="bg-yellow-300 border-4 border-black p-4 flex flex-col space-y-4 min-h-screen dark:bg-gray-800 dark:border-white">
<div class="bg-red-500 border-4 border-black p-4 flex items-center justify-between dark:bg-red-800 dark:border-white">
<h1 class="text-xl font-bold text-black dark:text-white">File Viewer</h1>
<input type="text" placeholder="Search..." class="border-4 border-black p-2 bg-yellow-100 dark:bg-gray-700 dark:border-white dark:text-white">
</div>
<div class="flex flex-grow space-x-4">
<div class="w-1/4 bg-green-400 border-4 border-black p-4 overflow-y-auto dark:bg-green-700 dark:border-white">
<h2 class="text-lg font-semibold mb-4 text-black dark:text-white">Files</h2>
<ul class="space-y-2">
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">document_A_really_long_name.pdf</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">image_001.jpg</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">archive.zip</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">data_analysis.xlsx</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">presentation.pptx</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">script.py</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">notes.txt</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">config.json</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">report.docx</li>
<li class="bg-blue-400 border-2 border-black p-2 font-mono truncate dark:bg-blue-700 dark:border-white dark:text-white">video.mp4</li>
</ul>
</div>
<div class="w-3/4 bg-purple-400 border-4 border-black p-4 flex items-center justify-center text-black dark:bg-purple-700 dark:border-white dark:text-white">
Select a file to view its content.
</div>
</div>
<div class="bg-orange-500 border-4 border-black p-4 flex items-center justify-between dark:bg-orange-800 dark:border-white">
<span class="text-black dark:text-white">Status: Ready</span>
<button class="bg-white border-2 border-black px-4 py-2 font-bold dark:bg-gray-600 dark:border-white dark:text-white">Upload</button>
</div>
</div>
Verwandte Komponenten
Datei-Viewer-Komponente
Eine reaktionsschnelle Dateibetrachterkomponente mit Mikrointeraktionen, lebendigen Farben und Unterstützung für den Dunkelmodus, die sich für den Konsum von Blogs oder Inhalten eignet. Es zeigt Dateidetails, eine Vorschau und zugehörige Aktionen an.
Neumorphism File Viewer-Komponente
Eine Dateibetrachter-Komponente im Neumorphism-Stil für soziale Medien mit komplementärem Farbschema und mäßiger Komplexität. Es ist reaktionsschnell und unterstützt dunkles Theme mit Tailwind CSS.
Datei-Viewer-Komponente
Responsive File Viewer-Komponente mit Unterstützung für den Dunkelmodus