File size: 1,902 Bytes
a6d1411 |
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 |
import React from "react";
import { ProviderInfo, CalendarData } from "../types/heatmap";
interface ProviderSummaryProps {
provider: ProviderInfo;
calendarData: CalendarData;
rank: number;
}
const ProviderSummary: React.FC<ProviderSummaryProps> = ({
provider,
calendarData,
rank
}) => {
const providerName = provider.fullName || provider.authors[0];
const calendarKey = provider.authors[0];
const totalCount = calendarData[calendarKey]?.reduce((sum, day) => sum + day.count, 0) || 0;
const handleClick = () => {
const element = document.getElementById(`provider-${calendarKey}`);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
};
return (
<div
className="flex flex-col items-center min-w-0 flex-shrink-0 cursor-pointer"
onClick={handleClick}
>
{/* Logo Circle with Release Count Badge */}
<div className="relative">
{provider.avatarUrl ? (
<img
src={provider.avatarUrl}
alt={`${providerName} logo`}
className="w-16 h-16 rounded-full shadow-lg border-2 border-border/50 hover:border-blue-500/50 transition-all duration-200"
/>
) : (
<div className="w-16 h-16 rounded-full bg-muted flex items-center justify-center text-xl font-bold text-muted-foreground hover:bg-muted/80 transition-all duration-200">
{providerName.charAt(0).toUpperCase()}
</div>
)}
{/* Release Count Badge */}
<div className="absolute -top-2 -right-2 bg-gradient-to-br from-gray-600 to-gray-700 text-white text-xs font-bold rounded-full min-w-[24px] h-6 flex items-center justify-center px-1.5 shadow-lg border-2 border-background">
{totalCount > 999 ? `${Math.floor(totalCount / 1000)}k` : totalCount}
</div>
</div>
</div>
);
};
export default ProviderSummary;
|