| 1 |
import { __ } from '@wordpress/i18n'; |
| 2 |
import { useSettingsStore, useSettingsStoreReady } from '../../state/settings'; |
| 3 |
|
| 4 |
export const Notice = ({ |
| 5 |
message, |
| 6 |
callback, |
| 7 |
href, |
| 8 |
seenKey, |
| 9 |
}: { |
| 10 |
message: string; |
| 11 |
callback?: () => void; |
| 12 |
href: string; |
| 13 |
seenKey: string; |
| 14 |
}) => { |
| 15 |
const { seenNotices, setSeenNotice } = useSettingsStore(); |
| 16 |
const ready = useSettingsStoreReady(); |
| 17 |
|
| 18 |
return null; |
| 19 |
if (!ready) return null; |
| 20 |
if (seenNotices.includes(seenKey)) return null; |
| 21 |
|
| 22 |
return ( |
| 23 |
<div className="relative bg-gray-100 hover:bg-blue-100"> |
| 24 |
<button |
| 25 |
className="absolute top-0 right-0 border-0 mt-1 mr-2 leading-none p-0 bg-transparent cursor-pointer" |
| 26 |
title={__('Dismiss', 'code-block-pro')} |
| 27 |
type="button" |
| 28 |
onClick={() => setSeenNotice(seenKey)}> |
| 29 |
x |
| 30 |
</button> |
| 31 |
|
| 32 |
<a |
| 33 |
className="block p-4 underline caret-pink-600 m-0 bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-teal-500 text-left text-base leading-5 font-medium cursor-pointer border-0" |
| 34 |
href={href} |
| 35 |
target="_blank" |
| 36 |
rel="noreferrer" |
| 37 |
title={__('Press here', 'code-block-pro')} |
| 38 |
onClick={callback}> |
| 39 |
{message} |
| 40 |
</a> |
| 41 |
</div> |
| 42 |
); |
| 43 |
}; |
| 44 |
|
