Datei-Viewer-Komponente

<div class="bg-pink-100 dark:bg-gray-800 min-h-screen font-mono">
  <div class="container mx-auto p-4 lg:p-8">
    <div class="bg-white dark:bg-gray-900 shadow-xl border-4 border-black dark:border-gray-700 transform -rotate-2 hover:rotate-0 transition-transform duration-300">
      <div class="border-b-4 border-black dark:border-gray-700 px-6 py-4 flex justify-between items-center bg-yellow-200 dark:bg-yellow-700">
        <h2 class="text-2xl font-bold text-black dark:text-white">File: document.pdf</h2>
        <span class="text-sm text-gray-700 dark:text-gray-300">Size: 1.2 MB</span>
      </div>
      <div class="p-6">
        <div class="border-2 border-dashed border-gray-400 dark:border-gray-600 p-8 text-center text-gray-600 dark:text-gray-400 bg-gray-200 dark:bg-gray-800">
          <p class="mb-4">Content preview unavailable for this file type.</p>
          <svg class="mx-auto h-12 w-12 text-gray-500 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
          </svg>
        </div>
        
        <div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
          <h3 class="text-xl font-bold mb-4 text-black dark:text-white">File Details</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-gray-800 dark:text-gray-200">
            <div><strong>Type:</strong> PDF Document</div>
            <div><strong>Date Uploaded:</strong> 2023-10-27</div>
            <div><strong>Author:</strong> John Doe</div>
            <div><strong>Last Modified:</strong> 2023-10-27</div>
          </div>
        </div>

        <div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
          <h3 class="text-xl font-bold mb-4 text-black dark:text-white">Actions</h3>
          <div class="flex space-x-4">
            <button class="bg-blue-500 dark:bg-blue-700 hover:bg-blue-700 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform -skew-x-6 hover:skew-x-0 transition-transform duration-300">Download</button>
            <button class="bg-green-500 dark:bg-green-700 hover:bg-green-700 dark:hover:bg-green-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform skew-x-6 hover:skew-x-0 transition-transform duration-300">Share</button>
            <button class="bg-red-500 dark:bg-red-700 hover:bg-red-700 dark:hover:bg-red-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform -rotate-3 hover:rotate-0 transition-transform duration-300">Delete</button>
          </div>
        </div>

         <div class="mt-6 border-t-4 border-black dark:border-gray-700 pt-6">
          <h3 class="text-xl font-bold mb-4 text-black dark:text-white">Comments</h3>
          <div class="space-y-4">
            <div class="bg-gray-100 dark:bg-gray-700 p-4 border-2 border-black dark:border-gray-600 transform rotate-1 hover:rotate-0 transition-transform duration-300">
              <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full mr-4 border-2 border-black dark:border-gray-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
                <div class="text-sm">
                  <div class="font-bold text-black dark:text-white">Commenter Name</div>
                  <div class="text-gray-600 dark:text-gray-400 text-xs">2 hours ago</div>
                </div>
              </div>
              <p class="text-gray-800 dark:text-gray-200">This is a sample comment on the file. The Brutalist design elements make it stand out!</p>
            </div>
             <div class="bg-gray-100 dark:bg-gray-700 p-4 border-2 border-black dark:border-gray-600 transform -rotate-1 hover:rotate-0 transition-transform duration-300">
              <div class="flex items-center mb-2">
                <img class="w-10 h-10 rounded-full mr-4 border-2 border-black dark:border-gray-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
                <div class="text-sm">
                  <div class="font-bold text-black dark:text-white">Another Commenter</div>
                  <div class="text-gray-600 dark:text-gray-400 text-xs">1 hour ago</div>
                </div>
              </div>
              <p class="text-gray-800 dark:text-gray-200">The pastel colors are a nice touch with the brutalist style.</p>
            </div>
          </div>
           <div class="mt-4">
            <textarea class="w-full p-4 border-2 border-black dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 font-mono" rows="4" placeholder="Add a comment..."></textarea>
            <button class="mt-2 bg-purple-500 dark:bg-purple-700 hover:bg-purple-700 dark:hover:bg-purple-500 text-white font-bold py-2 px-4 border-b-4 border-black dark:border-gray-900 hover:border-gray-600 dark:hover:border-gray-600 rounded-none transform skew-y-3 hover:skew-y-0 transition-transform duration-300">Post Comment</button>
          </div>
        </div>

      </div>
    </div>
  </div>
</div>