Компонент Просмотрщик Файлов

<div class="min-h-screen bg-gray-100 p-4 dark:bg-gray-950 transition-colors duration-300">
  <div class="container mx-auto rounded-lg shadow-xl overflow-hidden md:flex flex-col md:flex-row dark:bg-gray-900 border border-gray-200 dark:border-gray-800">
    <!-- Sidebar / File Tree -->
    <div class="w-full md:w-1/4 bg-gray-50 dark:bg-gray-850 p-4 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-800 flex-shrink-0">
      <h3 class="text-lg font-semibold mb-4 text-gray-800 dark:text-gray-100 flex items-center">
        <svg class="w-5 h-5 mr-2 text-indigo-600 dark:text-orange-400" 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="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
        </svg>
        Projects
      </h3>
      <ul class="space-y-2 text-sm text-gray-700 dark:text-gray-300">
        <li>
          <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
            <svg class="w-4 h-4 mr-2 text-indigo-500 dark:text-orange-500" 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 7v10l2 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H4z"></path>
            </svg>
            <span class="font-medium">My Portfolio (Active)</span>
          </button>
          <ul class="ml-4 mt-1 space-y-1">
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md bg-indigo-50 dark:bg-orange-950 text-indigo-700 dark:text-orange-300 font-semibold hover:bg-indigo-100 dark:hover:bg-orange-900 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-indigo-600 dark:text-orange-400" 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                </svg>
                README.md
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-emerald-500 dark:text-emerald-400" 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                </svg>
                index.html
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-yellow-500 dark:text-yellow-400" 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
                </svg>
                styles.css
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-blue-500 dark:text-blue-400" 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="M9.75 17L9 20l-1 1h8l-1-1-1.25-3M15 10V5.293a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 0012.586 2H7a2 2 0 00-2 2v16a2 2 0 002 2h10a2 2 0 002-2V10h-6z"></path>
                </svg>
                script.js
              </button>
            </li>
            <li>
              <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
                <svg class="w-4 h-4 mr-2 text-purple-500 dark:text-purple-400" 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 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
                assets/
              </button>
            </li>
          </ul>
        </li>
        <li>
          <button class="flex items-center w-full text-left p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-200 focus:outline-none focus:ring focus:ring-indigo-300 dark:focus:ring-orange-700">
            <svg class="w-4 h-4 mr-2 text-indigo-500 dark:text-orange-500" 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 7v10l2 2h12a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H4z"></path>
            </svg>
            Old Projects
          </button>
        </li>
      </ul>
    </div>

    <!-- Main Content / File Preview -->
    <div class="flex-1 flex flex-col">
      <!-- Top Bar / File Name & Actions -->
      <div class="bg-white dark:bg-gray-850 p-4 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between flex-wrap gap-2">
        <h2 class="text-lg font-medium text-gray-800 dark:text-gray-100 flex items-center">
          <svg class="w-5 h-5 mr-2 text-indigo-600 dark:text-orange-400" 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
          </svg>
          README.md
        </h2>
        <div class="flex space-x-2">
          <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-orange-800 dark:text-orange-100 dark:hover:bg-orange-700 dark:focus:ring-orange-600 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            <svg class="-ml-0.5 mr-2 h-4 w-4" 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 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
            </svg>
            Preview
          </button>
          <button class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-700 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 dark:focus:ring-gray-600 dark:focus:ring-offset-gray-900 transition-colors duration-200">
            <svg class="-ml-0.5 mr-2 h-4 w-4" 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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
            </svg>
            Edit
          </button>
        </div>
      </div>

      <!-- File Content / Preview Area -->
      <div class="flex-grow overflow-y-auto p-6 bg-white dark:bg-gray-900 scrollbar-thin scrollbar-thumb-rounded-full scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600 scrollbar-track-gray-200 dark:scrollbar-track-gray-800">
        <div class="prose dark:prose-invert max-w-none text-gray-800 dark:text-gray-200">
          <h1 class="text-3xl font-bold mb-4 text-indigo-700 dark:text-orange-400">README.md - My Portfolio</h1>
          <p class="mb-4">Welcome to my personal portfolio project! This repository showcases a collection of my best work in web development, focusing on responsive design, modern UI/UX, and performance.</p>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Features:</h2>
          <ul class="list-disc list-inside space-y-2 mb-4">
            <li>Fully responsive design for desktop, tablet, and mobile.</li>
            <li>Implemented with <strong class="text-indigo-600 dark:text-orange-400">HTML5</strong>, <strong class="text-indigo-600 dark:text-orange-400">CSS3</strong> (Tailwind CSS), and Vanilla <strong class="text-indigo-600 dark:text-orange-400">JavaScript</strong>.</li>
            <li>Dark mode support for reduced eye strain.</li>
            <li>Interactive components and smooth animations.</li>
            <li>Optimized for performance and accessibility.</li>
          </ul>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Sections:</h2>
          <ol class="list-decimal list-inside space-y-2 mb-4">
            <li><strong>Home:</strong> Introduction and quick overview.</li>
            <li><strong>About Me:</strong> My background, skills, and values.</li>
            <li><strong>Projects:</strong> Detailed view of key projects with live demos and source code.</li>
            <li><strong>Contact:</strong> How to get in touch.</li>
          </ol>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Technologies Used:</h2>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=1" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              HTML5
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=2" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              Tailwind CSS
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=3" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              JavaScript
            </span>
            <span class="p-3 bg-gray-100 dark:bg-gray-800 rounded-lg text-center shadow-sm text-gray-700 dark:text-gray-300">
              <img src="https://picsum.photos/40/40?random=4" alt="Tech Icon" class="w-8 h-8 rounded-full mx-auto mb-2">
              Responsive Design
            </span>
          </div>
          <h2 class="text-2xl font-semibold mb-3 text-gray-800 dark:text-gray-100">Setup:</h2>
          <p class="mb-4">To run this project locally, clone the repository and open <code>index.html</code> in your browser.</p>
          <pre class="bg-gray-100 dark:bg-gray-800 rounded-lg p-4 text-sm overflow-x-auto border border-gray-200 dark:border-gray-700"><code class="text-gray-800 dark:text-gray-200">git clone https://github.com/yourusername/my-portfolio.git
cd my-portfolio
# Open index.html in your browser</code></pre>
          <p class="mt-4 text-gray-600 dark:text-gray-400">Feel free to explore and provide feedback. Thank you for visiting!</p>
        </div>
      </div>

      <!-- File Details / Bottom Bar (optional, could also be on the side) -->
      <div class="bg-white dark:bg-gray-850 p-4 border-t border-gray-200 dark:border-gray-800 text-sm text-gray-600 dark:text-gray-300 flex justify-between items-center flex-wrap gap-2">
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Updated:</span> 2 hours ago by
          <img class="inline-block h-6 w-6 rounded-full ring-2 ring-indigo-300 dark:ring-orange-600 ml-1 mr-1" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <span class="font-medium text-gray-700 dark:text-gray-200">John Doe</span>
        </div>
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Size:</span> 1.2 KB
        </div>
        <div>
          <span class="font-medium text-gray-700 dark:text-gray-200">Type:</span> Markdown File
        </div>
      </div>
    </div>
  </div>
</div>