diff --git a/.changeset/frank-camels-raise.md b/.changeset/frank-camels-raise.md new file mode 100644 index 0000000..0c8abff --- /dev/null +++ b/.changeset/frank-camels-raise.md @@ -0,0 +1,5 @@ +--- +'shimmer-from-structure': minor +--- + +Lock dependencies diff --git a/docs/app/components/Header.tsx b/docs/app/components/Header.tsx index 13a1f0a..912c1cd 100644 --- a/docs/app/components/Header.tsx +++ b/docs/app/components/Header.tsx @@ -3,6 +3,7 @@ import Link from 'next/link'; import { useState, useEffect } from 'react'; import { ThemeToggle } from './ThemeToggle'; +import { formatCompactNumber } from '@/lib/formatNumber'; export function Header() { const [mobileMenuOpen, setMobileMenuOpen] = useState(false); @@ -78,7 +79,7 @@ export function Header() { - {stars.toLocaleString()} + {formatCompactNumber(stars)} )} @@ -162,7 +163,7 @@ export function Header() { - {stars.toLocaleString()} + {formatCompactNumber(stars)} )} diff --git a/docs/lib/formatNumber.ts b/docs/lib/formatNumber.ts new file mode 100644 index 0000000..69e043f --- /dev/null +++ b/docs/lib/formatNumber.ts @@ -0,0 +1,21 @@ +/** + * Formats a number into a compact string representation + * @param num - The number to format + * @returns Formatted string (e.g., 1000 -> "1k", 1234 -> "1.2k", 999 -> "999") + */ +export function formatCompactNumber(num: number): string { + if (num < 1000) { + return num.toString(); + } + + const thousands = num / 1000; + const rounded = Math.round(thousands * 10) / 10; + + // If the rounded value is a whole number, show without decimal + if (rounded % 1 === 0) { + return `${Math.round(rounded)}k`; + } + + // Otherwise show one decimal place + return `${rounded}k`; +} diff --git a/packages/shimmer-from-structure/package.json b/packages/shimmer-from-structure/package.json index 6074e1b..f33e715 100644 --- a/packages/shimmer-from-structure/package.json +++ b/packages/shimmer-from-structure/package.json @@ -1,6 +1,6 @@ { "name": "shimmer-from-structure", - "version": "2.5.0", + "version": "2.4.5", "description": "Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.", "main": "index.js", "types": "index.d.ts",