| 1 |
import { useEffect, useState } from '@wordpress/element' |
| 2 |
import { CopyToClipboard } from 'react-copy-to-clipboard' |
| 3 |
import { __ } from '@wordpress/i18n' |
| 4 |
|
| 5 |
/** Overlay for pattern import button */ |
| 6 |
export const DevButtonOverlay = ({ template }) => { |
| 7 |
const [idText, setIdText] = useState(template.id) |
| 8 |
|
| 9 |
useEffect(() => { |
| 10 |
if (idText === template.id) return |
| 11 |
setTimeout(() => setIdText(template.id), 1000) |
| 12 |
}, [idText, template.id]) |
| 13 |
|
| 14 |
return ( |
| 15 |
<div className="group-hover:opacity-90 opacity-0 flex space-x-2 items-center mb-2 ml-2 absolute bottom-0 left-0 transition duration-200 ease-in-out z-50"> |
| 16 |
<CopyToClipboard |
| 17 |
text={template.id} |
| 18 |
onCopy={() => setIdText(__('Copied...', 'extendify'))}> |
| 19 |
<button className="bg-white border border-black p-2 rounded-md shadow-md cursor-pointer"> |
| 20 |
{idText} |
| 21 |
</button> |
| 22 |
</CopyToClipboard> |
| 23 |
<a |
| 24 |
target="_blank" |
| 25 |
className="bg-white border font-semibold border-black p-2 rounded-md shadow-md no-underline text-black" |
| 26 |
href={`https://airtable.com/appn5PSl8wU6X70sG/tblviYevlV5fYAEH7/viwh0L1kHmXN7FIB9/${template.id}`} |
| 27 |
rel="noreferrer"> |
| 28 |
{__('Edit', 'extendify')} |
| 29 |
</a> |
| 30 |
</div> |
| 31 |
) |
| 32 |
} |
| 33 |
|
