Function ProxyTopList

apps/web/components/features/proxies/proxy-top-list.tsx:49–142

({ data, limit = 5, onViewAll }: ProxyTopListProps)

}

export function ProxyTopList({ data, limit = 5, onViewAll }: ProxyTopListProps) {
  const [sortBy, setSortBy] = useState<SortBy>("traffic");
  const t = useTranslations("topProxies");
  const proxiesT = useTranslations("proxies");
  const isWindows = useIsWindows();

  const { proxies, totalTraffic, totalConnections } = useMemo(() => {
    if (!data) return { proxies: [], totalTraffic: 0, totalConnections: 0 };
    
    const sorted = [...data].sort((a, b) => {
      if (sortBy === "traffic") {
        const totalA = a.totalDownload + a.totalUpload;
        const totalB = b.totalDownload + b.totalUpload;
        return totalB - totalA;
      }
      return b.totalConnections - a.totalConnections;
    });

    const list = sorted.slice(0, limit).map((p, i) => ({
      ...p,
      total: p.totalDownload + p.totalUpload,
      color: COLORS[i % COLORS.length],
      displayName: formatProxyName(p.chain),
      countryCode: getProxyCountryCode(p.chain),
    }));
    
    const totalT = list.reduce((sum, p) => sum + p.total, 0);
    const totalC = list.reduce((sum, p) => sum + p.totalConnections, 0);
    
    return { proxies: list, totalTraffic: totalT, totalConnections: totalC };
  }, [data, limit, sortBy]);

  const toggleSort = () => {
    setSortBy(prev => prev === "traffic" ? "connections" : "traffic");
  };

  if (proxies.length === 0) {
    return (
      <OverviewCard title={t("title")} icon={<Server className="w-4 h-4" />}>
        <div className="py-8 text-center text-sm text-muted-foreground">
          {proxiesT("noData")}
        </div>
      </OverviewCard>
    );
  }

  return (
    <OverviewCard 
      title={t("title")} 
      icon={<Server className="w-4 h-4" />}
      action={
        <Button 
          variant="ghost" 
          size="sm" 
          className="h-7 px-2 text-xs"
          onClick={toggleSort}
        >
          {sortBy === "traffic" ? (