| 1 |
import image from '@draft/svg/Image'; |
| 2 |
import { Button, Icon } from '@wordpress/components'; |
| 3 |
import { __, sprintf } from '@wordpress/i18n'; |
| 4 |
|
| 5 |
export const CreditCounter = ({ usedCredits, total }) => { |
| 6 |
if (usedCredits < total) { |
| 7 |
return ( |
| 8 |
<div className="flex items-center justify-center gap-2"> |
| 9 |
<Icon className="fill-gray-700" icon={image} size="12px" /> |
| 10 |
<p className="mb-0 text-[12px] text-gray-700"> |
| 11 |
{sprintf( |
| 12 |
// translators: %1$s is the number of used credits, %2$s is the total credits |
| 13 |
__('%1$s of %2$s daily image credits used', 'extendify-local'), |
| 14 |
usedCredits, |
| 15 |
total, |
| 16 |
)} |
| 17 |
</p> |
| 18 |
</div> |
| 19 |
); |
| 20 |
} |
| 21 |
|
| 22 |
return ( |
| 23 |
<div className="flex gap-3 border-y-0 border-l-4 border-r-0 border-solid border-[#3858E9] bg-gray-100 p-3"> |
| 24 |
<div> |
| 25 |
<Icon icon={image} className="fill-gray-900" size="12px" /> |
| 26 |
</div> |
| 27 |
<div className="flex flex-col gap-2"> |
| 28 |
<p className="mb-0 text-[12px] font-bold text-gray-700"> |
| 29 |
{sprintf( |
| 30 |
// translators: %1$s is the number of used credits, %2$s is the total credits |
| 31 |
__('%1$s of %2$s daily image credits used', 'extendify-local'), |
| 32 |
usedCredits, |
| 33 |
total, |
| 34 |
)} |
| 35 |
</p> |
| 36 |
<p className="mb-0 text-gray-900"> |
| 37 |
{__( |
| 38 |
'You can still explore and find great images on Unsplash until your credits reset.', |
| 39 |
'extendify-local', |
| 40 |
)} |
| 41 |
</p> |
| 42 |
<Button |
| 43 |
href="https://unsplash.com/" |
| 44 |
variant="primary" |
| 45 |
target="_blank" |
| 46 |
className="justify-center text-center" |
| 47 |
> |
| 48 |
{__('Search on Unsplash', 'extendify-local')} |
| 49 |
</Button> |
| 50 |
</div> |
| 51 |
</div> |
| 52 |
); |
| 53 |
}; |
| 54 |
|
