Komponenten Dateibetrachter Datei-Viewer-Komponente

Datei-Viewer-Komponente

Eine Dateibetrachterkomponente im brutalistischen Stil mit responsivem Design und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Vorschau

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.

Offen

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.

Offen

Datei-Viewer-Komponente

Responsive File Viewer-Komponente mit Unterstützung für den Dunkelmodus

Offen