File size: 3,124 Bytes
a6d1411 a14caa5 a6d1411 6580e54 a6d1411 6580e54 a6d1411 a61e08f a6d1411 a61e08f 324cefc a61e08f a6d1411 a14caa5 a61e08f a14caa5 a61e08f a14caa5 a6d1411 6580e54 |
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 85 86 87 88 89 |
import React from "react";
import { ProviderInfo, CalendarData } from "../types/heatmap";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
interface OrganizationButtonProps {
provider: ProviderInfo;
calendarData: CalendarData;
rank: number;
}
const OrganizationButton: React.FC<OrganizationButtonProps> = ({
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 (
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<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-lg shadow-lg transition-all duration-200 bg-white dark:bg-gray-900"
/>
) : (
<div className="w-16 h-16 rounded-lg 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">
{/* Provider Name */}
<div className="text-xs font-medium text-foreground truncate max-w-20 text-center">
{providerName}
</div>
</div>
</div>
</TooltipTrigger>
<TooltipContent side="bottom" className="bg-background border border-border shadow-lg">
<p className="text-sm font-medium">
{totalCount} new repos in the last year
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
);
};
export default OrganizationButton;
|