counter

src/features/VpnStats.tsx

@@ -1,32 +1,38 @@
+import { useTrafficStore } from "@/store/useTrafficStore"; // путь к твоему стору
 import { cn } from "@/lib/utils";
 import { useTranslation } from "react-i18next";
 
-interface VpnStatsProps {
-  received: string;
-  sent: string;
-  className?: string;
+// Функция форматирования остается прежней
+function formatBytes(bytes: number, decimals = 1) {
+  if (!+bytes) return "0 B";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
 }
 
-export function VpnStats({ received, sent, className }: VpnStatsProps) {
+export function VpnStats({ className }: { className?: string }) {
   const { t } = useTranslation();
+
+  // Достаем данные из Zustand
+  const rx = useTrafficStore((state) => state.rx);
+  const tx = useTrafficStore((state) => state.tx);
+
   return (
     <div
       className={cn(
-        "w-full max-w-70",
-        "relative flex items-center justify-between px-8 py-4 rounded-2xl", // Увеличил отступы внутри
-        "bg-background/20 backdrop-blur-md border border-white/10",
-        "shadow-[inset_0_1px_1px_rgba(255,255,255,0.4),0_8px_16px_rgba(0,0,0,0.1)]",
-        "backdrop-blur-md saturate-150 brightness-110",
+        "w-full max-w-70 relative flex items-center justify-between px-8 py-4 rounded-2xl",
+        "bg-background/20 backdrop-blur-md border border-white/10 shadow-lg",
         className,
       )}
     >
-      {/* Теперь контент внутри растянется равномерно */}
       <div className="flex flex-col items-center flex-1">
         <span className="text-[10px] uppercase tracking-widest text-muted-foreground font-bold">
           {t("rx")}
         </span>
-        <span className="text-sm font-mono text-foreground font-semibold tracking-tight">
-          {received}
+        <span className="text-sm font-mono text-foreground font-semibold">
+          {formatBytes(rx)}
         </span>
       </div>
 
@@ -36,8 +42,8 @@ export function VpnStats({ received, sent, className }: VpnStatsProps) {
         <span className="text-[10px] uppercase tracking-widest text-muted-foreground font-bold">
           {t("tx")}
         </span>
-        <span className="text-sm font-mono text-foreground font-semibold tracking-tight">
-          {sent}
+        <span className="text-sm font-mono text-foreground font-semibold">
+          {formatBytes(tx)}
         </span>
       </div>
     </div>