chore: update metrics badge component (#35)

Author: shelegdmitriy

src/components/MetricsBadge.tsx

@@ -1,7 +1,9 @@
+import type { Icon } from '@phosphor-icons/react';
+
 interface MetricsBadgeProps {
   href: string;
   value: string | number;
-  icon: React.ComponentType<{ size: number; className?: string }>;
+  icon: Icon;
   variant?: 'desktop' | 'mobile';
   loading?: boolean;
 }
@@ -10,8 +12,8 @@ export default function MetricsBadge({
   href,
   value,
   icon: Icon,
-  variant,
-  loading
+  variant = 'desktop',
+  loading = false
 }: MetricsBadgeProps) {
   const linkClass =
     variant === 'desktop'
@@ -26,18 +28,19 @@ export default function MetricsBadge({
       ? 'font-medium text-gray-700 group-hover:text-orange-700'
       : 'font-medium text-gray-700';
 
+  if (loading) {
+    return (
+      <div className="flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white/80 px-3 py-1.5">
+        <div className="h-3.5 w-3.5 animate-pulse rounded bg-gray-200" />
+        <div className="h-4 w-12 animate-pulse rounded bg-gray-200" />
+      </div>
+    );
+  }
+
   return (
-    <>
-      {loading ? (
-        <div className="animate-pulse rounded-lg bg-gray-200 px-3 py-1.5">
-          <div className="h-4 w-8 rounded bg-gray-300"></div>
-        </div>
-      ) : (
-        <a href={href} target="_blank" rel="noopener noreferrer" className={linkClass}>
-          <Icon size={14} className={iconClass} />
-          <span className={textClass}>{value}</span>
-        </a>
-      )}
-    </>
+    <a href={href} target="_blank" rel="noopener noreferrer" className={linkClass}>
+      <Icon size={14} className={iconClass} />
+      <span className={textClass}>{value}</span>
+    </a>
   );
 }