| 1 |
import { memo } from '@wordpress/element' |
| 2 |
import { _n, sprintf } from '@wordpress/i18n' |
| 3 |
import { Icon } from '@wordpress/icons' |
| 4 |
import clasNames from 'classnames' |
| 5 |
import { useUserStore } from '@library/state/User' |
| 6 |
import { alert, download } from './icons/' |
| 7 |
|
| 8 |
export const ImportCounter = memo(function ImportCounter() { |
| 9 |
const { remainingImports } = useUserStore() |
| 10 |
const count = remainingImports() |
| 11 |
|
| 12 |
return ( |
| 13 |
<div className="relative mb-5"> |
| 14 |
<div |
| 15 |
className={clasNames( |
| 16 |
'hidden w-full justify-between py-3 px-4 text-sm text-white no-underline sm:flex', |
| 17 |
{ |
| 18 |
'bg-design-main': count > 0, |
| 19 |
'bg-extendify-alert': !count, |
| 20 |
}, |
| 21 |
)}> |
| 22 |
<span className="flex items-center space-x-2 text-xs no-underline"> |
| 23 |
<Icon icon={count > 0 ? download : alert} size={14} /> |
| 24 |
<span> |
| 25 |
{sprintf( |
| 26 |
// translators: %s is the number of imports remaining |
| 27 |
_n( |
| 28 |
'%s Import remaining', |
| 29 |
'%s Imports remaining', |
| 30 |
count, |
| 31 |
'extendify', |
| 32 |
), |
| 33 |
count, |
| 34 |
)} |
| 35 |
</span> |
| 36 |
</span> |
| 37 |
</div> |
| 38 |
</div> |
| 39 |
) |
| 40 |
}) |
| 41 |
|
