Spaces:
Running
Running
File size: 2,685 Bytes
a6d1411 a61e08f a6d1411 a61e08f 324cefc a61e08f a6d1411 a61e08f a6d1411 a61e08f a6d1411 a61e08f a6d1411 a61e08f a6d1411 a61e08f b86067d a6d1411 a61e08f 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
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 providerData = calendarData[calendarKey] || [];
const totalCount = providerData.reduce((sum, day) => sum + day.count, 0);
const handleClick = () => {
const element = document.getElementById(`provider-${calendarKey}`);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
};
const getRankBadgeClasses = () => {
if (rank === 1) {
return "bg-gradient-to-br from-yellow-400 to-yellow-600 text-yellow-900";
}
if (rank === 2) {
return "bg-gradient-to-br from-gray-300 to-gray-500 text-gray-900";
}
if (rank === 3) {
return "bg-gradient-to-br from-amber-600 to-amber-800 text-amber-100";
}
return "bg-gradient-to-br from-gray-800 to-gray-900 text-gray-100";
};
return (
<div
className="flex flex-col items-center min-w-0 flex-shrink-0 cursor-pointer group px-1"
onClick={handleClick}
>
{/* Logo Circle */}
<div className="relative">
{/* Rank Badge */}
<div className={`absolute -top-2 -left-2 ${getRankBadgeClasses()} 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 z-10`}>
#{rank}
</div>
{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>
)}
</div>
{/* Activity Info */}
<div className="mt-1.5 text-center space-y-0.5">
{/* Provider Name */}
<div className="text-xs font-medium text-foreground truncate max-w-20 text-center">
{providerName}
</div>
{/* Release Count */}
<div className="text-[10px] text-muted-foreground">
{totalCount} in the last year
</div>
</div>
</div>
);
};
export default ProviderSummary;
|