1
1
import Button from "@/components/ui/button" ;
2
2
import DiscordIcon from "@/icons/discord.svg" ;
3
3
import { useTranslation } from "next-i18next" ;
4
+ import { useMemo } from "react" ;
4
5
5
6
/**
6
7
* Statistic interface definitions
@@ -18,27 +19,37 @@ const stats: Statistic[] = [
18
19
{
19
20
title : "testimonials.community.stats.card-1.title" ,
20
21
description : "testimonials.community.stats.card-1.description" ,
21
- count : 16838 ,
22
+ count : 22240 ,
22
23
} ,
23
24
{
24
25
title : "testimonials.community.stats.card-2.title" ,
25
26
description : "testimonials.community.stats.card-2.description" ,
26
- count : 2669 ,
27
+ count : 3595 ,
27
28
} ,
28
29
{
29
30
title : "testimonials.community.stats.card-3.title" ,
30
31
description : "testimonials.community.stats.card-3.description" ,
31
- count : 6527 ,
32
+ count : 8131 ,
32
33
} ,
33
34
] ;
34
35
export default function CommunityStats ( ) {
35
36
const { t } = useTranslation ( ) ;
37
+ const digitFormatter = useMemo ( ( ) => new Intl . NumberFormat ( ) , [ ] ) ;
38
+
39
+ const formattedStat = useMemo (
40
+ ( ) =>
41
+ stats . map ( ( stat : Statistic ) => ( {
42
+ ...stat ,
43
+ count : digitFormatter . format ( stat . count ) ,
44
+ } ) ) ,
45
+ [ digitFormatter ]
46
+ ) ;
36
47
37
48
return (
38
49
< div className = "p-7 bg-primary rounded-3.5xl mx-auto text-white relative md:absolute md:top-28 lg:top-32 xl:w-1/3 md:w-4/6 z-10 sm:max-w-sm" >
39
50
< h3 className = "m-0 text-4.5xl w-3/4" > { t ( "testimonials.community.title" ) } </ h3 >
40
51
< div className = "relative divide-y divide-white divide-dotted" >
41
- { stats . map ( ( stat ) => (
52
+ { formattedStat . map ( ( stat ) => (
42
53
< div key = { stat . title } className = "py-6" >
43
54
< span className = "block text-.5xl mb-2" > { stat . count } </ span >
44
55
< p className = "text-base w-3/4 m-0" >
0 commit comments