Datei-Viewer-Komponente

<div class="font-sans bg-gray-100 text-gray-900 min-h-screen p-4 dark:bg-gray-900 dark:text-gray-100 flex items-center justify-center">
  <div class="w-full max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-0 border-4 border-yellow-500 dark:border-yellow-700">

    <!-- Left Sidebar (File Explorer Tree) -->
    <div class="col-span-1 border-r-4 border-yellow-500 dark:border-yellow-700 bg-yellow-200 dark:bg-yellow-900 p-4 overflow-y-auto max-h-[80vh] flex flex-col">
      <h3 class="text-lg font-bold mb-4 text-yellow-800 dark:text-yellow-100 uppercase tracking-wider">Files & Folders</h3>
      <ul class="space-y-1 text-yellow-700 dark:text-yellow-200 text-sm flex-grow">
        <li>
          <a href="#" class="flex items-center p-2 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200">
            <svg class="w-5 h-5 mr-2 text-yellow-600 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
            My Documents
          </a>
          <ul class="ml-4 mt-1 space-y-1">
            <li>
              <a href="#" class="flex items-center p-2 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200 group">
                <svg class="w-4 h-4 mr-2 text-yellow-500 dark:text-yellow-400 group-hover:text-yellow-600 dark:group-hover:text-yellow-200" fill="currentColor" viewBox="0 0 20 20"><path d="M4 4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-3.293l-1.414-1.414A2 2 0 009.828 2H5C3.895 2 3 2.895 3 4z"></path></svg>
                Resumes
              </a>
              <ul class="ml-4 mt-1 space-y-1">
                <li><a href="#" class="flex items-center px-2 py-1 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200 text-yellow-600 dark:text-yellow-300 current-file">
                  <svg class="w-4 h-4 mr-2 text-red-500 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 2.586L16.414 6A2 2 0 0117 7.414V16a2 2 0 01-2 2H5a2 2 0 01-2-2V4zm5 2V4.586L13.414 9H9V6zm-.952 9.07c.07.243.208.463.399.645l.965.965a.5.5 0 00.707 0l.965-.965a.5.5 0 00.106-.475l-.462-1.385a.5.5 0 00-.476-.325h-1a.5.5 0 00-.475.325l-.463 1.385a.5.5 0 00.106.475z" clip-rule="evenodd"></path></svg>
                  My_Resume_2023.pdf
                </a></li>
                <li><a href="#" class="flex items-center px-2 py-1 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200 text-yellow-600 dark:text-yellow-300">
                  <svg class="w-4 h-4 mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0113 2.586L16.414 6A2 2 0 0117 7.414V16a2 2 0 01-2 2H5a2 2 0 01-2-2V4zm5 2V4.586L13.414 9H9V6zm1 8a1 1 0 100-2h-3a1 1 0 100 2h3z" clip-rule="evenodd"></path></svg>
                  Cover_Letter_Template.docx
                </a></li>
              </ul>
            </li>
            <li><a href="#" class="flex items-center p-2 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200">
              <svg class="w-4 h-4 mr-2 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" ><path d="M4 4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-3.293l-1.414-1.414A2 2 0 009.828 2H5C3.895 2 3 2.895 3 4z"></path></svg>
              Certificates
            </a></li>
            <li><a href="#" class="flex items-center p-2 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200">
              <svg class="w-4 h-4 mr-2 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" ><path d="M4 4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-3.293l-1.414-1.414A2 2 0 009.828 2H5C3.895 2 3 2.895 3 4z"></path></svg>
              Projects
            </a></li>
          </ul>
        </li>
        <li>
          <a href="#" class="flex items-center p-2 rounded-md hover:bg-yellow-300 dark:hover:bg-yellow-800 transition-colors duration-200">
            <svg class="w-5 h-5 mr-2 text-yellow-600 dark:text-yellow-300" fill="currentColor" viewBox="0 0 20 20"><path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"></path></svg>
            Archived Jobs
          </a>
        </li>
      </ul>
      <button class="mt-4 w-full bg-orange-500 dark:bg-orange-700 text-white py-2 px-4 rounded-md text-sm hover:bg-orange-600 dark:hover:bg-orange-800 transition-colors duration-200 flex items-center justify-center">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path></svg>
        Upload File
      </button>
    </div>

    <!-- Main Content (File Viewer) -->
    <div class="col-span-1 md:col-span-2 lg-col-span-2 flex flex-col p-4 bg-gray-50 dark:bg-gray-700 min-h-full">
      <div class="flex justify-between items-center mb-4 pb-2 border-b-2 border-orange-400 dark:border-orange-600">
        <h2 class="text-xl md:text-2xl font-extrabold text-orange-700 dark:text-orange-200">My_Resume_2023.pdf</h2>
        <div class="flex space-x-2">
          <button class="p-2 rounded-full bg-orange-100 dark:bg-orange-800 text-orange-600 dark:text-orange-300 hover:bg-orange-200 dark:hover:bg-orange-700 transition-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>
          </button>
          <button class="p-2 rounded-full bg-orange-100 dark:bg-orange-800 text-orange-600 dark:text-orange-300 hover:bg-orange-200 dark:hover:bg-orange-700 transition-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>
          </button>
          <button class="p-2 rounded-full bg-orange-100 dark:bg-orange-800 text-orange-600 dark:text-orange-300 hover:bg-orange-200 dark:hover:bg-orange-700 transition-colors duration-200">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
          </button>
        </div>
      </div>

      <div class="flex-grow overflow-hidden flex items-center justify-center p-2 bg-gray-200 dark:bg-gray-700 border-2 border-orange-300 dark:border-orange-500 rounded-md shadow-inner">
        <!-- Placeholder for PDF Viewer / Image Preview -->
        <img src="https://picsum.photos/600/800?random=1" alt="Resume Preview" class="max-w-full max-h-full object-contain border-2 border-indigo-500 dark:border-indigo-600 shadow-md transform hover:scale-105 transition-transform duration-300">
      </div>

      <div class="mt-4 flex justify-between items-center text-sm md:text-base text-gray-700 dark:text-gray-300">
        <div class="flex space-x-4">
          <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-indigo-500 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> Last Modified: 2023-10-26</span>
          <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-indigo-500 dark:text-indigo-400" fill="currentColor" viewBox="0 0 20 20"><path d="M5 8a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"></path><path fill-rule="evenodd" d="M2 5a2 2 0 012-2h4.586A2 2 0 0111 3.414L15.414 8A2 2 0 0116 9.414V16a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm5 6a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg> Pages: 2</span>
        </div>
        <span>Size: 1.2 MB</span>
      </div>
    </div>

    <!-- Right Sidebar (File Details & Actions) -->
    <div class="col-span-1 lg:col-span-1 border-l-4 border-yellow-500 dark:border-yellow-700 bg-blue-100 dark:bg-blue-900 p-4 overflow-y-auto max-h-[80vh] flex flex-col">
      <h3 class="text-lg font-bold mb-4 text-blue-800 dark:text-blue-100 uppercase tracking-wider">Details & Actions</h3>

      <div class="mb-6 p-4 bg-blue-200 dark:bg-blue-800 rounded-md shadow-sm border border-blue-300 dark:border-blue-700">
        <h4 class="text-md font-semibold mb-2 text-blue-700 dark:text-blue-200">File Information</h4>
        <p class="text-sm text-blue-600 dark:text-blue-300"><strong class="block">Type:</strong> PDF Document</p>
        <p class="text-sm text-blue-600 dark:text-blue-300"><strong class="block">Created:</strong> 2023-01-15</p>
        <p class="text-sm text-blue-600 dark:text-blue-300"><strong class="block">Owner:</strong>
          <a href="#" class="flex items-center hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200">
            <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-6 h-6 rounded-full mr-2 border border-blue-400 dark:border-blue-600">
            John Doe
          </a>
        </p>
      </div>

      <div class="mb-6 p-4 bg-blue-200 dark:bg-blue-800 rounded-md shadow-sm border border-blue-300 dark:border-blue-700">
        <h4 class="text-md font-semibold mb-2 text-blue-700 dark:text-blue-200">Collaborators</h4>
        <div class="flex -space-x-2 overflow-hidden mb-2">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-blue-300 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Collaborator 1">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-blue-300 dark:ring-blue-700" src="https://randomuser.me/api/portraits/men/4.jpg" alt="Collaborator 2">
          <img class="inline-block h-8 w-8 rounded-full ring-2 ring-blue-300 dark:ring-blue-700" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Collaborator 3">
          <span class="flex h-8 w-8 rounded-full ring-2 ring-blue-300 dark:ring-blue-700 bg-blue-400 dark:bg-blue-600 text-white items-center justify-center text-xs font-semibold">+2</span>
        </div>
        <button class="w-full bg-blue-600 dark:bg-blue-700 text-white py-2 px-4 rounded-md text-sm hover:bg-blue-700 dark:hover:bg-blue-800 transition-colors duration-200 flex items-center justify-center">
          <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM12 10a4 4 0 01-4 4H3a2 2 0 00-2 2v1a2 2 0 002 2h10a2 2 0 002-2v-1a2 2 0 00-2-2h-3z"></path></svg>
          Share Document
        </button>
      </div>

      <div class="flex-grow p-4 bg-blue-200 dark:bg-blue-800 rounded-md shadow-sm border border-blue-300 dark:border-blue-700">
        <h4 class="text-md font-semibold mb-2 text-blue-700 dark:text-blue-200">Version History</h4>
        <ul class="space-y-2 text-sm text-blue-600 dark:text-blue-300">
          <li class="hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200 flex items-center justify-between">
            <span>v1.2 (Latest)</span>
            <span class="text-xs text-blue-500 dark:text-blue-400">Oct 26, 2023, 10:30 AM</span>
          </li>
          <li class="hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200 flex items-center justify-between">
            <span>v1.1</span>
            <span class="text-xs text-blue-500 dark:text-blue-400">Oct 20, 2023, 09:00 AM</span>
          </li>
          <li class="hover:text-blue-800 dark:hover:text-blue-100 transition-colors duration-200 flex items-center justify-between">
            <span>v1.0</span>
            <span class="text-xs text-blue-500 dark:text-blue-400">Jan 15, 2023, 02:00 PM</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>