Spaces:
Running
Running
import React from "react"; | |
import { ProviderInfo } from "../types/heatmap"; | |
interface OrganizationCardProps { | |
provider: ProviderInfo; | |
calendarKey: string; | |
providerName: string; | |
totalCount: number; | |
} | |
const OrganizationCard: React.FC<OrganizationCardProps> = ({ | |
provider, | |
calendarKey, | |
providerName, | |
totalCount, | |
}) => { | |
return ( | |
<div className="mb-4"> | |
{/* Organization Name & Stats Badge */} | |
<div className="text-center bg-muted/20 rounded-lg p-3 border border-border/30"> | |
{/* Avatar and Name Row */} | |
<div className="flex items-center justify-center gap-2 mb-2"> | |
{provider.avatarUrl && ( | |
<div className="relative"> | |
<img | |
src={provider.avatarUrl} | |
alt={`${providerName} logo`} | |
className="w-8 h-8 rounded-md shadow-sm border border-border/50" | |
/> | |
{provider.isVerified && ( | |
<div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-blue-500 rounded-full flex items-center justify-center"> | |
<svg className="w-2 h-2 text-white" fill="currentColor" viewBox="0 0 20 20"> | |
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" /> | |
</svg> | |
</div> | |
)} | |
</div> | |
)} | |
<h3 className="text-base font-bold text-foreground"> | |
<a | |
href={`https://huggingface.co/${calendarKey}`} | |
target="_blank" | |
rel="noopener noreferrer" | |
className="hover:text-blue-500 hover:underline transition-colors duration-200" | |
> | |
{providerName} | |
</a> | |
</h3> | |
</div> | |
{/* Compact Organization Stats */} | |
<div className="flex flex-wrap justify-center gap-2 text-xs mb-2"> | |
<div className="bg-background/60 rounded px-2 py-1 border border-border/40"> | |
<span className="font-semibold text-foreground">{(provider.numModels || 0).toLocaleString()}</span> | |
<span className="text-muted-foreground ml-1">models</span> | |
</div> | |
<div className="bg-background/60 rounded px-2 py-1 border border-border/40"> | |
<span className="font-semibold text-foreground">{(provider.numDatasets || 0).toLocaleString()}</span> | |
<span className="text-muted-foreground ml-1">datasets</span> | |
</div> | |
<div className="bg-background/60 rounded px-2 py-1 border border-border/40"> | |
<span className="font-semibold text-foreground">{(provider.numSpaces || 0).toLocaleString()}</span> | |
<span className="text-muted-foreground ml-1">spaces</span> | |
</div> | |
<div className="bg-background/60 rounded px-2 py-1 border border-border/40"> | |
<span className="font-semibold text-foreground">{(provider.numFollowers || 0).toLocaleString()}</span> | |
<span className="text-muted-foreground ml-1">followers</span> | |
</div> | |
</div> | |
{/* Releases Past Year */} | |
<div className="text-xs text-muted-foreground italic"> | |
<span className="font-bold text-foreground">{totalCount.toLocaleString()}</span> releases this past year | |
</div> | |
</div> | |
</div> | |
); | |
}; | |
export default OrganizationCard; |