Toolbar.js (4540B)
1 import { __, sprintf } from '@wordpress/i18n' 2 import { useGlobalStore } from '../../state/GlobalState' 3 import { useUserStore } from '../../state/User' 4 5 export default function Toolbar({ className }) { 6 const remainingImports = useUserStore(state => state.remainingImports) 7 const apiKey = useUserStore(state => state.apiKey) 8 const allowedImports = useUserStore(state => state.allowedImports) 9 const metaData = useGlobalStore(state => state.metaData) 10 const setOpen = useGlobalStore(state => state.setOpen) 11 12 return <div className={className}> 13 <div className="flex justify-between items-center px-6 sm:px-12 h-full"> 14 <div className="flex space-x-12 h-full"> 15 <div className="bg-transparent font-bold flex items-center space-x-1.5 lg:w-72"> 16 <svg className="" width="30" height="30" viewBox="0 0 103 103" fill="none" xmlns="http://www.w3.org/2000/svg"> 17 <rect y="25.75" width="70.8125" height="77.25" fill="#000000"/> 18 <rect x="45.0625" width="57.9375" height="57.9375" fill="#37C2A2"/> 19 </svg> 20 <span className="text-sm transform translate-y-0.5 whitespace-nowrap"> 21 {__('Extendify Library', 'extendify-sdk')} 22 </span> 23 </div> 24 {!apiKey.length && <> 25 <div className="items-center ml-8 h-full hidden md:flex"> 26 <div className="m-0 p-0 px-6 text-sm bg-gray-50 border-l border-gray-300 h-full flex items-center whitespace-nowrap"> 27 {sprintf( 28 __('Imports left: %s / %s'), remainingImports(), Number(allowedImports), 29 )} 30 </div> 31 <div className="h-full items-center border-l hidden lg:flex"> 32 {metaData?.banners?.library_header && <> 33 {metaData.banners.library_header?.image && 34 <a 35 className="h-full block" 36 target="_blank" 37 rel="noreferrer" 38 href={metaData.banners.library_header.url}> 39 <img 40 src={metaData.banners.library_header.image} 41 alt="Extendify notice"/> 42 </a> 43 } 44 {!metaData.banners.library_header?.image && 45 <div className="text-gray-900 space-x-6 bg-extendify-light px-6 p-2 h-full flex items-center"> 46 <span className="font-bold text-left">{metaData.banners.library_header.text_backup}</span> 47 {metaData.banners.library_header?.url && <div> 48 <a 49 className="button-extendify-main" 50 target="_blank" 51 rel="noreferrer" 52 href={`${metaData.banners.library_header.url}&utm_source=${encodeURIComponent(window.extendifySdkData.source)}&utm_medium=library&utm_campaign=banner`}> 53 {metaData.banners.library_header?.button_text ?? __('Get it now', 'extendify-sdk')} 54 </a> 55 </div>} 56 </div> 57 } 58 </>} 59 </div> 60 </div> 61 </>} 62 </div> 63 <div className="space-x-2 transform sm:translate-x-6"> 64 <button type="button" className="components-button has-icon" onClick={() => setOpen(false)}> 65 <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" size="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg> 66 <span className="sr-only">{__('Close library', 'extendify-sdk')}</span> 67 </button> 68 </div> 69 </div> 70 </div> 71 }