# extendify/0.2.0/src/components/modals/NoImportModal.js

Extendify, version 0.2.0. 96 lines.

- Page: https://pluginprobe.com/plugins/extendify/0.2.0/code/src/components/modals/NoImportModal.js
- Raw: https://pluginprobe.com/plugins/extendify/0.2.0/raw/src/components/modals/NoImportModal.js
- Modified: 2022-01-13T17:04:32+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.2.0/code/src/components/modals/NoImportModal.js#L10-L20`.

```javascript
import { Icon } from '@wordpress/components'
import { Button } from '@wordpress/components'
import { __ } from '@wordpress/i18n'
import SplitModal from './SplitModal'
import SettingsModal from './SettingsModal'
import {
    growthArrow,
    patterns,
    layouts,
    support,
    star,
    brandLogo,
} from '../icons'
import { useGlobalStore } from '../../state/GlobalState'
import Primary from '../buttons/Primary'

export const NoImportModal = () => (
    <SplitModal
        isOpen={true}
        onClose={() => useGlobalStore.setState({ currentModal: null })}>
        <div className="bg-white p-12 text-center items-center">
            <div className="flex space-x-2 items-center justify-center mb-10 text-extendify-black">
                {brandLogo}
            </div>

            <h3 className="text-xl md:leading-3">
                {__("You're out of imports", 'extendify')}
            </h3>
            <p className="text-sm text-black">
                {__(
                    'Sign up today and get unlimited access to our entire collection of patterns and page layouts.',
                    'extendify',
                )}
            </p>
            <div>
                <Primary
                    tagName="a"
                    target="_blank"
                    className="m-auto mt-10 py-3"
                    href={`https://extendify.com/pricing/?utm_source=${window.extendifyData.sdk_partner}&utm_medium=library&utm_campaign=no-imports-modal&utm_content=get-unlimited-imports`}
                    rel="noreferrer">
                    {__('Get Unlimited Imports', 'extendify')}
                    <Icon icon={growthArrow} size={24} className="-ml-1 mr-1" />
                </Primary>
                <p className="text-sm text-extendify-gray mb-0">
                    {__('Have an account?', 'extendify')}
                    <Button
                        onClick={() => {
                            useGlobalStore.setState({
                                currentModal: (
                                    <SettingsModal
                                        isOpen={true}
                                        onClose={() =>
                                            useGlobalStore.setState({
                                                currentModal: null,
                                            })
                                        }
                                    />
                                ),
                            })
                        }}
                        className="underline hover:no-underline text-sm text-extendify-gray pl-2">
                        {__('Sign in', 'extendify')}
                    </Button>
                </p>
            </div>
        </div>
        <div className="space-y-2 justify-center p-10 text-black">
            <div className="flex items-center space-x-2">
                <Icon icon={patterns} size={24} className="-ml-1 mr-1" />
                <span className="text-sm leading-none">
                    {__("Access to 100's of Patterns", 'extendify')}
                </span>
            </div>
            <div className="flex items-center space-x-2">
                <Icon icon={layouts} size={24} className="-ml-1 mr-1" />
                <span className="text-sm leading-none">
                    {__('Beautiful full page layouts', 'extendify')}
                </span>
            </div>
            <div className="flex items-center space-x-2">
                <Icon icon={support} size={24} className="-ml-1 mr-1" />
                <span className="text-sm leading-none">
                    {__('Fast and friendly support', 'extendify')}
                </span>
            </div>
            <div className="flex items-center space-x-2">
                <Icon icon={star} size={24} className="-ml-1 mr-1" />
                <span className="text-sm leading-none">
                    {__('14-Day guarantee', 'extendify')}
                </span>
            </div>
        </div>
    </SplitModal>
)

```