src/components/Heatmap.tsx

import React from "react";
import ActivityCalendar from "react-activity-calendar";
import { Tooltip } from "@mui/material";
import Link from "next/link";

type HeatmapProps = {
  data: Array<{ date: string; count: number; level: number }>;
  color: string;
  providerName: string;
};

const Heatmap: React.FC<HeatmapProps> = ({ data, color, providerName }) => {
  return (
    <div className="flex flex-col items-center">
      <div className="w-full overflow-x-auto flex justify-center">
        <ActivityCalendar
          data={data}
          theme={{
            dark: ["#161b22", color],
            light: ["#e0e0e0", color],
          }}
          hideTotalCount
          renderBlock={(block, activity) => (
            <Tooltip
              title={`${activity.count} events on ${activity.date}`}
              arrow
            >
              {block}
            </Tooltip>
          )}
        />
      </div>
      <div>
        <p className="text-sm italic light:text-slate-500">
          Models, Datasets, and Spaces created by{" "}
          <Link
            href={`https://huggingface.co/${providerName}`}
            target="_blank"
            rel="noopener noreferrer"
            className="hover:underline text-blue-500"
          >
            {providerName}.
          </Link>
        </p>
      </div>
    </div>
  );
};

export default Heatmap;