File size: 1,871 Bytes
22aa376 eda28cd 22aa376 eda28cd a6d1411 22aa376 a6d1411 22aa376 eda28cd a6d1411 eda28cd a6d1411 22aa376 c4f22f9 22aa376 c4f22f9 22aa376 c4f22f9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import React from "react";
import ActivityCalendar from "react-activity-calendar";
import { Tooltip, Avatar } from "@mui/material";
import Link from "next/link";
type HeatmapProps = {
data: Array<{ date: string; count: number; level: number }>;
color: string;
providerName: string;
fullName: string;
avatarUrl: string;
authorId: string;
showHeader?: boolean;
};
const Heatmap: React.FC<HeatmapProps> = ({ data, color, providerName, fullName, avatarUrl, authorId, showHeader = true }) => {
return (
<div className="flex flex-col items-center w-full mx-auto">
{showHeader && (
<div className="flex flex-col sm:flex-row items-center mb-4 w-full justify-center">
{avatarUrl && (
<Avatar src={avatarUrl} alt={fullName} className="mb-2 sm:mb-0 sm:mr-4" sx={{ width: 48, height: 48 }} />
)}
<div className="text-center sm:text-left">
<h2 className="text-lg font-semibold">
<Link
href={`https://huggingface.co/${authorId}`}
target="_blank"
rel="noopener noreferrer"
className="hover:text-blue-500 hover:underline"
>
{fullName}
</Link>
</h2>
</div>
</div>
)}
<div className="w-full overflow-x-auto flex justify-center">
<ActivityCalendar
data={data}
theme={{
dark: ["#161b22", color],
light: ["#e0e0e0", color],
}}
blockSize={11}
hideTotalCount
renderBlock={(block, activity) => (
<Tooltip
title={`${activity.count} new repos on ${activity.date}`}
arrow
>
{block}
</Tooltip>
)}
/>
</div>
</div>
);
};
export default Heatmap;
|