File size: 3,438 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 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 |
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; |