2022-04-28 21:29:15 +00:00
|
|
|
import React from 'react';
|
|
|
|
|
|
|
|
import { shortNumberFormat } from 'soapbox/utils/numbers';
|
|
|
|
|
|
|
|
interface ICounter {
|
2022-05-01 04:39:58 +00:00
|
|
|
/** Number this counter should display. */
|
2023-02-15 21:26:27 +00:00
|
|
|
count: number
|
2022-11-03 16:13:45 +00:00
|
|
|
/** Optional max number (ie: N+) */
|
|
|
|
countMax?: number
|
2022-04-28 21:29:15 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/** A simple counter for notifications, etc. */
|
2022-11-03 16:13:45 +00:00
|
|
|
const Counter: React.FC<ICounter> = ({ count, countMax }) => {
|
2022-04-28 21:29:15 +00:00
|
|
|
return (
|
2023-02-01 22:13:42 +00:00
|
|
|
<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 dark:ring-gray-800'>
|
2022-11-03 16:13:45 +00:00
|
|
|
{shortNumberFormat(count, countMax)}
|
2022-04-28 21:29:15 +00:00
|
|
|
</span>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Counter;
|