Heat Maps Component

<div class="bg-gray-900 min-h-screen p-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-3xl font-bold text-white mb-8">Article Heatmap: Engagement Over Time</h1>

    <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-8">
      <div class="grid grid-cols-1 md:grid-cols-7 gap-2">
        
        </div>

        <!-- Heatmap Grid -->
        <div class="col-span-full grid grid-cols-21 gap-1">
          <!-- Days of the week -->
          <div class="col-span-1"></div> <!-- Empty corner -->
          <div class="col-span-2 text-gray-400 text-xs text-center">Mon</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Tue</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Wed</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Thu</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Fri</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Sat</div>
          <div class="col-span-3 text-gray-400 text-xs text-center">Sun</div>

          <!-- Sample Heatmap Cells (dynamic content would go here) -->
          <!-- Weeks as rows -->
          {[...Array(5)].map((_, weekIndex) => (
            <> 
              <div class="col-span-1 text-gray-400 text-xs text-right pr-2">Week {weekIndex + 1}</div>
              {[...Array(20)].map((_, dayIndex) => (
                <div
                  key={dayIndex}
                  class={
                    `col-span-1 h-5 rounded-sm
                    ${dayIndex % 7 === 0 ? "bg-gray-900" : ""}
                    ${dayIndex % 7 === 1 ? "bg-gray-700" : ""}
                    ${dayIndex % 7 === 2 ? "bg-gray-600" : ""}
                    ${dayIndex % 7 === 3 ? "bg-gray-500" : ""}
                    ${dayIndex % 7 === 4 ? "bg-gray-400" : ""}
                    ${dayIndex % 7 === 5 ? "bg-gray-300" : ""}
                    ${dayIndex % 7 === 6 ? "bg-gray-200" : ""}
                    `
                  }
                  title="Engagement: X"
                ></div>
              ))}
            </>
          ))}
        </div>

        <!-- Color Key -->
        <div class="col-span-full flex justify-end items-center mt-4 text-gray-400 text-sm">
          Less
          <div class="flex ml-2">
            <div class="h-4 w-4 bg-gray-900 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-700 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-600 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-500 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-400 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-300 rounded-sm mr-1"></div>
            <div class="h-4 w-4 bg-gray-200 rounded-sm mr-1"></div>
          </div>
          More
        </div>
      </div>
    </div>

    <!-- Example Article List (for context) -->
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <h2 class="text-xl font-bold text-white mb-4">Top Articles This Week</h2>
      <ul class="divide-y divide-gray-700">
        <li class="py-3 flex items-center">
          <img src="https://picsum.photos/id/101/60/60" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-md mr-4">
          <div>
            <p class="text-white font-semibold">The Future of AI in Content Creation</p>
            <p class="text-gray-400 text-sm">2,345 views - 12 comments</p>
          </div>
        </li>
        <li class="py-3 flex items-center">
          <img src="https://picsum.photos/id/102/60/60" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-md mr-4">
          <div>
            <p class="text-white font-semibold">Understanding SEO: A Comprehensive Guide</p>
            <p class="text-gray-400 text-sm">1,876 views - 8 comments</p>
          </div>
        </li>
        <li class="py-3 flex items-center">
          <img src="https://picsum.photos/id/103/60/60" alt="Article thumbnail" class="w-16 h-16 object-cover rounded-md mr-4">
          <div>
            <p class="text-white font-semibold">Mastering Responsive Web Design</p>
            <p class="text-gray-400 text-sm">1,502 views - 5 comments</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>