Remove LAION; add country flag per org (KR/US/CN/EU/ME) + render flag in ranking row
a2d972f verified | import React from "react"; | |
| import { ProviderInfo, CalendarData } from "../types/heatmap"; | |
| interface OrganizationButtonProps { | |
| provider: ProviderInfo; | |
| calendarData: CalendarData; | |
| rank: number; | |
| } | |
| // Compact vertical-leaderboard row: rank badge 路 avatar 路 name 路 repo count. | |
| 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 medal = rank === 1 ? "馃憫" : rank === 2 ? "馃" : rank === 3 ? "馃" : null; | |
| const badgeClasses = | |
| rank === 1 | |
| ? "bg-gradient-to-br from-yellow-400 to-yellow-600 text-yellow-900" | |
| : rank === 2 | |
| ? "bg-gradient-to-br from-gray-300 to-gray-500 text-gray-900" | |
| : rank === 3 | |
| ? "bg-gradient-to-br from-amber-600 to-amber-800 text-amber-100" | |
| : "bg-muted text-muted-foreground"; | |
| return ( | |
| <div | |
| className="flex items-center gap-3 w-full px-3 py-2 rounded-xl border border-border/60 bg-card hover:bg-muted/60 hover:border-border cursor-pointer transition-colors group" | |
| onClick={handleClick} | |
| > | |
| <div | |
| className={`shrink-0 w-9 h-9 rounded-full flex items-center justify-center text-sm font-bold shadow-sm ${badgeClasses}`} | |
| > | |
| {medal || `#${rank}`} | |
| </div> | |
| {provider.avatarUrl ? ( | |
| <img | |
| src={provider.avatarUrl} | |
| alt={`${providerName} logo`} | |
| className="w-8 h-8 rounded-md bg-white dark:bg-gray-900 shrink-0" | |
| /> | |
| ) : ( | |
| <div className="w-8 h-8 rounded-md bg-muted flex items-center justify-center text-sm font-bold text-muted-foreground shrink-0"> | |
| {providerName.charAt(0).toUpperCase()} | |
| </div> | |
| )} | |
| <span className="flex-1 min-w-0 truncate text-sm font-semibold text-foreground"> | |
| {provider.flag ? <span className="mr-1">{provider.flag}</span> : null} | |
| {providerName} | |
| </span> | |
| <span className="shrink-0 text-xs font-medium text-muted-foreground tabular-nums"> | |
| {totalCount.toLocaleString()}{" "} | |
| <span className="hidden sm:inline">repos</span> | |
| </span> | |
| </div> | |
| ); | |
| }; | |
| export default OrganizationButton; | |