# extendify/0.3.0/src/components/ImportCounter.js

Extendify, version 0.3.0. 64 lines.

- Page: https://pluginprobe.com/plugins/extendify/0.3.0/code/src/components/ImportCounter.js
- Raw: https://pluginprobe.com/plugins/extendify/0.3.0/raw/src/components/ImportCounter.js
- Modified: 2022-01-25T20:17:08+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/extendify/0.3.0/code/src/components/ImportCounter.js#L10-L20`.

```javascript
import classnames from 'classnames'
import { Icon } from '@wordpress/icons'
import { __, sprintf } from '@wordpress/i18n'
import { useEffect } from '@wordpress/element'
import { alert, download } from './icons/'
import { useUserStore } from '../state/User'
import { User as UserApi } from '../api/User'
import { growthArrow } from './icons'

export const ImportCounter = () => {
    const remainingImports = useUserStore((state) => state.remainingImports)
    const allowedImports = useUserStore((state) => state.allowedImports)
    const status = remainingImports() > 0 ? 'has-imports' : 'no-imports'
    const backgroundColor =
        status === 'has-imports'
            ? 'bg-extendify-main hover:bg-extendify-main-dark'
            : 'bg-extendify-alert'
    const icon = status === 'has-imports' ? download : alert

    useEffect(() => {
        if (!allowedImports) {
            const fallback = 5
            UserApi.allowedImports()
                .then((allowedImports) => {
                    allowedImports = /^[1-9]\d*$/.test(allowedImports)
                        ? allowedImports
                        : fallback
                    useUserStore.setState({ allowedImports })
                })
                .catch(() =>
                    useUserStore.setState({ allowedImports: fallback }),
                )
        }
    }, [allowedImports])

    if (!allowedImports) {
        return null
    }

    return (
        <a
            target="_blank"
            rel="noreferrer"
            className={classnames(
                backgroundColor,
                'hidden sm:flex w-full no-underline button-focus text-sm justify-between py-3 px-4 text-white rounded',
            )}
            href={`https://www.extendify.com/pricing/?utm_source=${encodeURIComponent(
                window.extendifyData.sdk_partner,
            )}&utm_medium=library&utm_campaign=import-counter&utm_content=get-more&utm_term=${status}`}>
            <div className="flex items-center space-x-2 no-underline text-xs">
                <Icon icon={icon} size={14} />
                <span>
                    {sprintf(__('%s Imports', 'extendify'), remainingImports())}
                </span>
            </div>
            <span className="text-white text-sm no-underline font-medium outline-none flex items-center">
                {__('Get more', 'extendify')}
                <Icon icon={growthArrow} size={24} className="-mr-1.5" />
            </span>
        </a>
    )
}

```