matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use animated number for counters

Browse Source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-05-05 14:48:57 +02:00
parent 3e8989c0b0
commit 001234dae1
2 changed files with 10 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ui/counter/counter.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { shortNumberFormat } from 'soapbox/utils/numbers';
import AnimatedNumber from 'soapbox/components/animated-number';
interface ICounter {
/** Number this counter should display. */
@ -13,7 +13,7 @@ interface ICounter {
const Counter: React.FC<ICounter> = ({ count, countMax }) => {
return (
<span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white black:ring-black dark:ring-gray-800'>
{shortNumberFormat(count, countMax)}
<AnimatedNumber value={count} max={countMax} />
</span>
);
};