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

27 lines
618 B
TypeScript
Raw Normal View History

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