Datei-Viewer-Komponente

<div class="p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-emerald-50 to-purple-50 dark:from-zinc-900 dark:to-slate-950 transition-colors duration-300">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:shadow-3xl hover:-translate-y-1 relative group">

    <!-- Header & File Info -->
    <div class="p-4 sm:p-6 border-b border-gray-100 dark:border-gray-700 flex items-center justify-between">
      <div class="flex items-center gap-4">
        <div class="flex-shrink-0 w-12 h-12 rounded-lg bg-gradient-to-br from-emerald-500 to-lime-500 dark:from-emerald-600 dark:to-lime-600 flex items-center justify-center shadow-lg transform transition-transform duration-300 group-hover:scale-105">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7 text-white" viewBox="0 0 24 24" fill="currentColor">
            <path d="M14 2H6C4.89543 2 4 2.89543 4 4V20C4 21.1046 4.89543 22 6 22H18C19.1046 22 20 21.1046 20 20V8L14 2ZM18 20V9H13V4.5L18 9Z" />
          </svg>
        </div>
        <div>
          <h2 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white transition-colors duration-300">Project_Report_Q3_Final.pdf</h2>
          <p class="text-sm text-gray-500 dark:text-gray-400 transition-colors duration-300">PDF Document • 4.8 MB</p>
        </div>
      </div>
      <div class="flex items-center gap-2">
        <button class="relative p-2 rounded-full bg-emerald-50 text-emerald-600 dark:bg-emerald-900 dark:text-emerald-300 hover:bg-emerald-100 dark:hover:bg-emerald-800 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 group-hover:scale-110 group-hover:rotate-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM13 16H11V10H13V16ZM13 8H11V6H13V8Z" />
          </svg>
          <span class="sr-only">Info</span>
          <span class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max px-2 py-1 bg-gray-800 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">File Info</span>
        </button>
        <button class="relative p-2 rounded-full bg-purple-50 text-purple-600 dark:bg-purple-900 dark:text-purple-300 hover:bg-purple-100 dark:hover:bg-purple-800 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 group-hover:scale-110 group-hover:-rotate-6">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 17L16 11H13V5H11V11H8L12 17ZM5 20H19V18H5V20Z" />
          </svg>
          <span class="sr-only">Download</span>
          <span class="absolute top-full left-1/2 -translate-x-1/2 mt-2 w-max px-2 py-1 bg-gray-800 text-white text-xs rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10">Download</span>
        </button>
      </div>
    </div>

    <!-- Main Content Area: Preview & Details -->
    <div class="md:flex">
      <!-- File Preview (Left/Top) -->
      <div class="md:w-3/5 p-4 sm:p-6 bg-gray-50 dark:bg-gray-850 flex items-center justify-center min-h-[250px] sm:min-h-[300px] md:min-h-[400px] lg:min-h-[500px] relative overflow-hidden">
        <img src="https://picsum.photos/seed/filepreview/800/600" alt="File Preview" class="object-contain max-w-full max-h-full rounded-md shadow-lg transform transition-transform duration-500 group-hover:scale-105 group-hover:brightness-110">
        <div class="absolute inset-0 bg-gradient-to-t from-gray-50/50 via-transparent to-gray-50/50 dark:from-gray-850/50 dark:via-transparent dark:to-gray-850/50 transition-opacity duration-300 opacity-0 group-hover:opacity-100"></div>
      </div>

      <!-- File Details & Actions (Right/Bottom) -->
      <div class="md:w-2/5 p-4 sm:p-6 bg-white dark:bg-gray-800 flex flex-col justify-between">
        <div>
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-4 border-b pb-2 border-gray-100 dark:border-gray-700">Details & Activity</h3>
          <ul class="space-y-3 text-sm text-gray-700 dark:text-gray-300">
            <li class="flex justify-between items-center">
              <span class="font-medium">Type:</span>
              <span class="px-2 py-0.5 bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 rounded-full text-xs">PDF</span>
            </li>
            <li class="flex justify-between items-center">
              <span class="font-medium">Size:</span>
              <span>4.8 MB</span>
            </li>
            <li class="flex justify-between items-center">
              <span class="font-medium">Uploaded:</span>
              <span>October 26, 2023, 10:30 AM</span>
            </li>
            <li class="flex justify-between items-center">
              <span class="font-medium">Last Modified:</span>
              <span>November 1, 2023, 03:15 PM</span>
            </li>
            <li>
              <span class="font-medium block mb-1">Access:</span>
              <div class="flex items-center space-x-2">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1" class="w-8 h-8 rounded-full border-2 border-emerald-400 transform transition-transform duration-300 hover:scale-125 hover:z-10">
                <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User 2" class="w-8 h-8 rounded-full border-2 border-purple-400 transform transition-transform duration-300 hover:scale-125 hover:z-10">
                <img src="https://randomuser.me/api/portraits/men/82.jpg" alt="User 3" class="w-8 h-8 rounded-full border-2 border-orange-400 transform transition-transform duration-300 hover:scale-125 hover:z-10">
                <span class="text-xs text-gray-500 dark:text-gray-400">+5 others</span>
              </div>
            </li>
          </ul>

          <div class="mt-6 sm:mt-8">
            <h4 class="font-semibold text-gray-900 dark:text-white mb-3">Recent Activity</h4>
            <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-2">
              <li class="flex items-start gap-3 relative before:content-[''] before:absolute before:left-1.5 before:top-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-purple-300 before:to-emerald-300 ">
                <span class="w-3 h-3 rounded-full bg-purple-500 dark:bg-purple-400 flex-shrink-0 mt-1 z-[1]"></span>
                <div>
                  <p><span class="font-medium text-gray-800 dark:text-white">Anna Smith</span> shared the file.</p>
                  <time datetime="2023-11-01T15:15:00" class="text-xs">2 hours ago</time>
                </div>
              </li>
              <li class="flex items-start gap-3 relative before:content-[''] before:absolute before:left-1.5 before:top-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-purple-300 before:to-emerald-300 ">
                <span class="w-3 h-3 rounded-full bg-emerald-500 dark:bg-emerald-400 flex-shrink-0 mt-1 z-[1]"></span>
                <div>
                  <p><span class="font-medium text-gray-800 dark:text-white">You</span> uploaded the file.</p>
                  <time datetime="2023-10-26T10:30:00" class="text-xs">6 days ago</time>
                </div>
              </li>
            </ul>
          </div>
        </div>

        <div class="mt-8 flex flex-col sm:flex-row gap-3">
          <button class="relative flex-1 py-3 px-6 rounded-lg bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-700 text-white font-semibold transition-all duration-300 transform active:scale-95 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-75 group/btn-preview">
            <span class="relative z-10">Open in Editor</span>
            <span class="absolute inset-0 bg-emerald-400 opacity-0 group-hover/btn-preview:opacity-20 transition-opacity duration-200 rounded-lg"></span>
            <span class="absolute right-3 top-1/2 -translate-y-1/2 group-hover/btn-preview:translate-x-1 transition-transform duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M8.59 16.59L13.17 12L8.59 7.41L10 6L16 12L10 18L8.59 16.59Z"/></svg>
            </span>
          </button>
          <button class="relative flex-1 py-3 px-6 rounded-lg bg-purple-500 hover:bg-purple-600 dark:bg-purple-600 dark:hover:bg-purple-700 text-white font-semibold transition-all duration-300 transform active:scale-95 shadow-md hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75 group/btn-share">
            <span class="relative z-10">Share</span>
            <span class="absolute inset-0 bg-purple-400 opacity-0 group-hover/btn-share:opacity-20 transition-opacity duration-200 rounded-lg"></span>
            <span class="absolute right-3 top-1/2 -translate-y-1/2 group-hover/btn-share:translate-x-1 transition-transform duration-200">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M18 16.08C17.24 16.08 16.56 16.37 16.04 16.85L8.91 12.7C8.96 12.47 9 12.24 9 12C9 11.76 8.96 11.53 8.91 11.3L15.96 7.15C16.44 7.63 17.12 7.92 18 7.92C19.66 7.92 21 6.58 21 5C21 3.34 19.66 2 18 2S15 3.34 15 5C15 5.24 15.04 5.47 15.09 5.7L8.04 9.85C7.56 9.37 6.88 9.08 6 9.08C4.34 9.08 3 10.42 3 12S4.34 14.92 6 14.92C6.88 14.92 7.56 14.63 8.04 14.15L15.09 18.3C15.04 18.53 15 18.76 15 19C15 20.66 16.34 22 18 22S21 20.66 21 19C21 17.34 19.66 16.08 18 16.08Z"/></svg>
            </span>
          </button>
        </div>

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