ヒートマップコンポーネント

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-2xl sm:text-3xl font-extrabold mb-6 sm:mb-8 text-center text-gray-900 dark:text-white">Weekly Activity Heatmap</h2>

    <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-4 sm:p-6 lg:p-8">
      <div class="grid grid-cols-8 gap-1 sm:gap-2 text-xs uppercase font-semibold mb-2 sm:mb-4 text-gray-500 dark:text-gray-400">
        <div class="col-span-1 text-center hidden sm:block">Sun</div>
        <div class="col-span-1 text-center hidden sm:block">Mon</div>
        <div class="col-span-1 text-center hidden sm:block">Tue</div>
        <div class="col-span-1 text-center hidden sm:block">Wed</div>
        <div class="col-span-1 text-center hidden sm:block">Thu</div>
        <div class="col-span-1 text-center hidden sm:block">Fri</div>
        <div class="col-span-1 text-center hidden sm:block">Sat</div>
        <div class="col-span-1 text-center hidden lg:block">Score</div>
        <div class="col-span-7 grid grid-cols-7 text-xs uppercase font-semibold mb-2 sm:mb-4 text-gray-500 dark:text-gray-400 sm:hidden">
          <div class="text-center">Sun</div>
          <div class="text-center">Mon</div>
          <div class="text-center">Tue</div>
          <div class="text-center">Wed</div>
          <div class="text-center">Thu</div>
          <div class="text-center">Fri</div>
          <div class="text-center">Sat</div>
        </div>
      </div>

      <div class="grid grid-cols-8 sm:grid-cols-8 gap-1 sm:gap-2">
        <!-- Example Row 1 - Day 1 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-300 dark:bg-gray-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 10">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">10</span>
        </div>
        <!-- Day 2 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-200 dark:bg-green-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 30">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">30</span>
        </div>
        <!-- Day 3 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-300 dark:bg-indigo-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 55">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">55</span>
        </div>
        <!-- Day 4 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-400 dark:bg-purple-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 78">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">78</span>
        </div>
        <!-- Day 5 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-400 dark:bg-red-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 92">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">92</span>
        </div>
        <!-- Day 6 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-300 dark:bg-blue-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 65">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">65</span>
        </div>
        <!-- Day 7 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-400 dark:bg-yellow-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 88">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">88</span>
        </div>
        <!-- Score Indicator -->
        <div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">High</div>


        <!-- Example Row 2 - Day 1 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-300 dark:bg-red-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 70">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">70</span>
        </div>
        <!-- Day 2 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-300 dark:bg-yellow-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 60">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">60</span>
        </div>
        <!-- Day 3 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-300 dark:bg-gray-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 20">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">20</span>
        </div>
        <!-- Day 4 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-300 dark:bg-purple-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 45">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">45</span>
        </div>
        <!-- Day 5 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-400 dark:bg-green-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 80">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">80</span>
        </div>
        <!-- Day 6 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-200 dark:bg-indigo-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 35">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">35</span>
        </div>
        <!-- Day 7 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-400 dark:bg-blue-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 95">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">95</span>
        </div>
        <!-- Score Indicator -->
        <div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">Medium</div>

        <!-- Add more rows as needed -->
        <!-- Example Row 3 -->
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-blue-200 dark:bg-blue-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 25">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">25</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-red-200 dark:bg-red-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 40">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">40</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-green-300 dark:bg-green-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 50">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">50</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-yellow-200 dark:bg-yellow-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 15">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">15</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-indigo-400 dark:bg-indigo-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 85">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">85</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-purple-200 dark:bg-purple-700
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 30">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">30</span>
        </div>
        <div class="col-span-1 w-full h-8 sm:h-10 rounded-md bg-gray-200 dark:bg-gray-600
                    hover:scale-105 transition-transform duration-200 ease-in-out cursor-pointer group
                    relative flex items-center justify-center p-1" title="Score: 5">
          <span class="text-xs font-bold text-white opacity-0 group-hover:opacity-100 transition-opacity
                       absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 select-none">05</span>
        </div>
        <div class="col-span-1 hidden lg:flex items-center justify-center text-sm font-semibold text-gray-700 dark:text-gray-300">Low</div>
      </div>

      <div class="flex justify-between items-center mt-6 sm:mt-8">
        <div class="text-sm text-gray-600 dark:text-gray-400">Current Week: <span class="font-medium">Nov 27 - Dec 03</span></div>
        <a href="#" class="text-sm font-semibold text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200 transition-colors duration-200">
          View All Activity &rarr;
        </a>
      </div>
    </div>

    <div class="mt-8 text-center">
      <h3 class="text-xl font-semibold mb-4 text-gray-800 dark:text-gray-200">Activity Insights</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4 lg:gap-6">
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-5">
          <p class="text-lg font-bold text-gray-900 dark:text-white mb-2">Peak Activity Day:</p>
          <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400">Saturday</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Highest Engagement Score</p>
        </div>
        <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-5">
          <p class="text-lg font-bold text-gray-900 dark:text-white mb-2">Average Daily Score:</p>
          <p class="text-4xl font-extrabold text-green-600 dark:text-green-400">67</p>
          <p class="text-sm text-gray-500 dark:text-gray-400 mt-2">Across the entire week</p>
        </div>
      </div>
    </div>

  </div>
</div>