diff --git a/components/account/AccountHeader.vue b/components/account/AccountHeader.vue index c8648f19..97d22e68 100644 --- a/components/account/AccountHeader.vue +++ b/components/account/AccountHeader.vue @@ -95,13 +95,13 @@ function previewAvatar() {
- {{ account.statusesCount }} Posts + {{ formattedNumber(account.statusesCount) }} Posts - {{ account.followingCount }} Following + {{ humanReadableNumber(account.followingCount) }} Following - {{ account.followersCount }} Followers + {{ humanReadableNumber(account.followersCount) }} Followers
diff --git a/components/account/AccountHoverCard.vue b/components/account/AccountHoverCard.vue index 41d29c9c..fabba76f 100644 --- a/components/account/AccountHoverCard.vue +++ b/components/account/AccountHoverCard.vue @@ -11,15 +11,15 @@ defineProps<{
- {{ account.statusesCount }} Posts + {{ formattedNumber(account.statusesCount) }} Posts - {{ account.followingCount }} Following + {{ humanReadableNumber(account.followingCount) }} Following - {{ account.followersCount }} Followers + {{ humanReadableNumber(account.followersCount) }} Followers
diff --git a/composables/numbers.ts b/composables/numbers.ts new file mode 100644 index 00000000..a287576a --- /dev/null +++ b/composables/numbers.ts @@ -0,0 +1,15 @@ +const formatter = Intl.NumberFormat() + +export const humanReadableNumber = (num: number) => { + if (num < 10000) + return formatter.format(num) + + if (num < 1000000) + return `${Math.floor(num / 1000)}K` + + return `${Math.floor(num / 1000000)}M` +} + +export const formattedNumber = (num: number) => { + return formatter.format(num) +}