soapbox/app/soapbox/components/icon-with-counter.tsx

28 wiersze
665 B
TypeScript
Czysty Zwykły widok Historia

import React from 'react';
import Icon, { IIcon } from 'soapbox/components/icon';
2022-04-28 21:29:15 +00:00
import { Counter } from 'soapbox/components/ui';
interface IIconWithCounter extends React.HTMLAttributes<HTMLDivElement> {
count: number
2022-11-03 16:13:45 +00:00
countMax?: number
icon?: string
src?: string
}
2022-11-03 16:13:45 +00:00
const IconWithCounter: React.FC<IIconWithCounter> = ({ icon, count, countMax, ...rest }) => {
return (
2022-03-21 18:09:01 +00:00
<div className='relative'>
<Icon id={icon} {...rest as IIcon} />
2022-03-21 18:09:01 +00:00
2022-04-28 21:29:15 +00:00
{count > 0 && (
<span className='absolute -top-2 -right-3'>
2022-11-03 16:13:45 +00:00
<Counter count={count} countMax={countMax} />
</span>
2022-04-28 21:29:15 +00:00
)}
</div>
);
};
export default IconWithCounter;