| 1 |
import { useEffect, useState } from '@wordpress/element' |
| 2 |
import { __, sprintf } from '@wordpress/i18n' |
| 3 |
import { CopyToClipboard } from 'react-copy-to-clipboard' |
| 4 |
|
| 5 |
/** Overlay for pattern import button */ |
| 6 |
export const DevButtonOverlay = ({ template }) => { |
| 7 |
const basePatternId = template?.fields?.basePattern?.length |
| 8 |
? template?.fields?.basePattern[0] |
| 9 |
: '' |
| 10 |
const [idText, setIdText] = useState(basePatternId) |
| 11 |
|
| 12 |
useEffect(() => { |
| 13 |
if (!basePatternId?.length || idText === basePatternId) return |
| 14 |
setTimeout(() => setIdText(basePatternId), 1000) |
| 15 |
}, [idText, basePatternId]) |
| 16 |
|
| 17 |
if (!basePatternId) return null |
| 18 |
|
| 19 |
return ( |
| 20 |
<div className="absolute bottom-0 left-0 z-30 mb-4 ml-4 flex items-center space-x-2 opacity-0 transition duration-100 group-hover:opacity-100 space-x-0.5"> |
| 21 |
<CopyToClipboard |
| 22 |
text={template?.fields?.basePattern} |
| 23 |
onCopy={() => setIdText(__('Copied!', 'extendify'))}> |
| 24 |
<button className="text-sm rounded-md border border-black bg-white py-1 px-2.5 font-medium text-black no-underline m-0 cursor-pointer"> |
| 25 |
{sprintf( |
| 26 |
// translators: %s is an ID |
| 27 |
__('Base: %s', 'extendify'), |
| 28 |
idText, |
| 29 |
)} |
| 30 |
</button> |
| 31 |
</CopyToClipboard> |
| 32 |
<a |
| 33 |
target="_blank" |
| 34 |
className="text-sm rounded-md border border-black bg-white py-1 px-2.5 font-medium text-black no-underline m-0" |
| 35 |
href={template?.fields?.editURL} |
| 36 |
rel="noreferrer"> |
| 37 |
{__('Edit', 'extendify')} |
| 38 |
</a> |
| 39 |
</div> |
| 40 |
) |
| 41 |
} |
| 42 |
|
