Composant Composants de rétroaction

<section class="p-4 sm:p-6 lg:p-8 min-h-screen bg-gray-900 text-gray-200 dark:bg-gray-950 dark:text-gray-100 font-sans">
  <div class="max-w-7xl mx-auto space-y-10">

    <!-- Header Section -->
    <header class="flex flex-col md:flex-row items-center justify-between pb-8 border-b border-purple-700/50 dark:border-purple-800/50">
      <h1 class="text-4xl sm:text-5xl font-extrabold text-blue-400 dark:text-blue-300 mb-4 md:mb-0">Student Feedback Hub</h1>
      <div class="flex items-center space-x-4">
        <input type="search" placeholder="Search feedback..." class="px-4 py-2 rounded-lg bg-gray-800 dark:bg-gray-800 border border-teal-500/50 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-teal-400 focus:border-transparent transition duration-300">
        <button class="px-5 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-semibold transition duration-300 shadow-lg hover:shadow-xl">
          Give New Feedback
        </button>
      </div>
    </header>

    <!-- Feedback Categories/Filter Section -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div class="p-5 rounded-xl bg-gradient-to-br from-blue-700 to-blue-900 dark:from-blue-800 dark:to-blue-950 shadow-xl border border-blue-600/50 dark:border-blue-700/50 text-center">
        <p class="text-blue-200 text-sm uppercas text-gray-200">Total Feedback</p>
        <p class="text-4xl font-bold mt-2 text-white">1,245</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-teal-700 to-teal-900 dark:from-teal-800 dark:to-teal-950 shadow-xl border border-teal-600/50 dark:border-teal-700/50 text-center">
        <p class="text-teal-200 text-sm uppercase text-gray-200">Positive</p>
        <p class="text-4xl font-bold mt-2 text-white">890</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-purple-700 to-purple-900 dark:from-purple-800 dark:to-purple-950 shadow-xl border border-purple-600/50 dark:border-purple-700/50 text-center">
        <p class="text-purple-200 text-sm uppercase text-gray-200">Suggestions</p>
        <p class="text-4xl font-bold mt-2 text-white">210</p>
      </div>
      <div class="p-5 rounded-xl bg-gradient-to-br from-red-700 to-red-900 dark:from-red-800 dark:to-red-950 shadow-xl border border-red-600/50 dark:border-red-700/50 text-center">
        <p class="text-red-200 text-sm uppercase text-gray-200">Concerns</p>
        <p class="text-4xl font-bold mt-2 text-white">145</p>
      </div>
    </div>

    <!-- Main Feedback Content Area -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

      <!-- Left Sidebar - Filters & Categories -->
      <aside class="md:col-span-1 space-y-6">
        <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-gray-700/50 dark:border-gray-800/50">
          <h3 class="text-xl font-bold mb-4 text-blue-400 dark:text-blue-300">Filter by Category</h3>
          <ul class="space-y-3">
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg bg-gray-700/50 hover:bg-gray-700 dark:bg-gray-800/50 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Course Content <span class="text-xs bg-purple-600 px-2 py-1 rounded-full text-white">80</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Instructor Performance <span class="text-xs bg-teal-600 px-2 py-1 rounded-full text-white">65</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Platform Usability <span class="text-xs bg-blue-600 px-2 py-1 rounded-full text-white">40</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">Technical Support <span class="text-xs bg-red-600 px-2 py-1 rounded-full text-white">15</span></a></li>
            <li><a href="#" class="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-800 transition duration-300 text-gray-300 hover:text-white">General <span class="text-xs bg-gray-600 px-2 py-1 rounded-full text-white">120</span></a></li>
          </ul>
        </div>

        <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-gray-700/50 dark:border-gray-800/50">
          <h3 class="text-xl font-bold mb-4 text-purple-400 dark:text-purple-300">Filter by Rating</h3>
          <div class="flex items-center space-x-3 mb-3">
            <input type="range" min="1" max="5" value="4" class="flex-grow h-2 rounded-lg appearance-none cursor-pointer bg-blue-600/50 dark:bg-blue-700/50 accent-blue-500">
            <span class="text-gray-300">4+ Stars</span>
          </div>
          <ul class="space-y-2">
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">5 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500" checked> <span class="text-gray-300">4 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">3 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">2 Stars</span></label></li>
            <li><label class="flex items-center space-x-2 text-gray-300"><input type="checkbox" class="form-checkbox h-4 w-4 text-blue-500 rounded-sm bg-gray-700 border-gray-600 dark:bg-gray-800 dark:border-gray-700 focus:ring-blue-500"> <span class="text-gray-300">1 Star</span></label></li>
          </ul>
        </div>
      </aside>

      <!-- Right Content - Feedback Cards -->
      <div class="md:col-span-2 space-y-6">

        <!-- Feedback Card 1 (Positive) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-teal-600/50 dark:border-teal-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-teal-500 dark:ring-teal-600">
              <div>
                <h4 class="font-semibold text-white">Alex Johnson</h4>
                <p class="text-sm text-gray-400">Course: Advanced CSS & Tailwind</p>
              </div>
            </div>
            <div class="text-teal-400 flex items-center space-x-1">
              <span>5</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"This course was absolutely fantastic! The explanations were clear, and the hands-on projects really solidified my understanding of Tailwind CSS. Highly recommend it to anyone looking to master modern web design."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#CourseContent</span>
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#Excellent</span>
            <span class="px-3 py-1 rounded-full bg-teal-700/50 text-teal-200">#Practical</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 2 days ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

        <!-- Feedback Card 2 (Suggestion) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-purple-600/50 dark:border-purple-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-purple-500 dark:ring-purple-600">
              <div>
                <h4 class="font-semibold text-white">Sarah Chen</h4>
                <p class="text-sm text-gray-400">Course: JavaScript Fundamentals</p>
              </div>
            </div>
            <div class="text-purple-400 flex items-center space-x-1">
              <span>4</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"The JS course is solid, but I think adding more interactive coding challenges directly within the platform would significantly enhance the learning experience. Sometimes switching between platforms disrupts the flow."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#PlatformUsability</span>
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#Suggestion</span>
            <span class="px-3 py-1 rounded-full bg-purple-700/50 text-purple-200">#Engagement</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 5 days ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

        <!-- Feedback Card 3 (Concern/Bug Report) -->
        <article class="bg-gray-800 dark:bg-gray-900 p-6 rounded-xl shadow-xl border border-red-600/50 dark:border-red-700/50">
          <div class="flex justify-between items-start mb-4">
            <div class="flex items-center space-x-4">
              <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="User Avatar" class="w-12 h-12 rounded-full ring-2 ring-red-500 dark:ring-red-600">
              <div>
                <h4 class="font-semibold text-white">Marcus Hill</h4>
                <p class="text-sm text-gray-400">Course: Data Structures & Algorithms</p>
              </div>
            </div>
            <div class="text-red-400 flex items-center space-x-1">
              <span>2</span>
              <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.642 7.362 8.113 1.178-5.875 5.728 1.389 8.082L12 18.06l-7.279 3.827 1.389-8.082-5.875-5.728 8.113-1.178L12 .587z"/></svg>
            </div>
          </div>
          <p class="text-gray-300 leading-relaxed mb-4">"I've encountered multiple broken links in the 'Further Reading' section of Module 3. It's frustrating to try and access resources only to find they're unavailable. Please update these links."</p>
          <div class="flex flex-wrap gap-2 text-sm">
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#TechnicalSupport</span>
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#BrokenLinks</span>
            <span class="px-3 py-1 rounded-full bg-red-700/50 text-red-200">#Urgent</span>
          </div>
          <div class="flex items-center justify-between mt-4 text-gray-400">
            <span class="text-sm">Posted 1 week ago</span>
            <button class="text-blue-400 hover:text-blue-300 transition duration-300">View Details</button>
          </div>
        </article>

      </div>
    </div>

    <!-- Pagination / Load More -->
    <div class="flex justify-center mt-10">
      <button class="px-6 py-3 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition duration-300 shadow-lg hover:shadow-xl">
        Load More Feedback
      </button>
    </div>

  </div>
</section>