refactor: refactor preview components

web/utils/format.ts

@@ -56,3 +56,35 @@ export const downloadFile = ({ data, fileName }: { data: Blob; fileName: string
   a.remove()
   window.URL.revokeObjectURL(url)
 }
+
+/**
+ * Formats a number into a readable string using "k", "M", or "B" suffix.
+ * @example
+ * 950     => "950"
+ * 1200    => "1.2k"
+ * 1500000 => "1.5M"
+ * 2000000000 => "2B"
+ *
+ * @param {number} num - The number to format
+ * @returns {string} - The formatted number string
+ */
+export const formatNumberAbbreviated = (num: number) => {
+  // If less than 1000, return as-is
+  if (num < 1000) return num.toString()
+
+  // Define thresholds and suffixes
+  const units = [
+    { value: 1e9, symbol: 'B' },
+    { value: 1e6, symbol: 'M' },
+    { value: 1e3, symbol: 'k' },
+  ]
+
+  for (let i = 0; i < units.length; i++) {
+    if (num >= units[i].value) {
+      const formatted = (num / units[i].value).toFixed(1)
+      return formatted.endsWith('.0')
+        ? `${Number.parseInt(formatted)}${units[i].symbol}`
+        : `${formatted}${units[i].symbol}`
+    }
+  }
+}