Use new two-step configuration modal
This commit is contained in:
parent
870a964050
commit
822949408f
7 changed files with 219 additions and 182 deletions
|
@ -4,7 +4,13 @@ import Portal from '@/components/elements/Portal';
|
|||
import copy from 'copy-to-clipboard';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const CopyOnClick: React.FC<{ text: string | number | null | undefined }> = ({ text, children }) => {
|
||||
interface CopyOnClickProps {
|
||||
text: string | number | null | undefined;
|
||||
showInNotification?: boolean;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const CopyOnClick = ({ text, showInNotification = true, children }: CopyOnClickProps) => {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
|
@ -43,7 +49,11 @@ const CopyOnClick: React.FC<{ text: string | number | null | undefined }> = ({ t
|
|||
<Fade in appear timeout={250} key={copied ? 'visible' : 'invisible'}>
|
||||
<div className={'fixed z-50 bottom-0 right-0 m-4'}>
|
||||
<div className={'rounded-md py-3 px-4 text-gray-200 bg-neutral-600/95 shadow'}>
|
||||
<p>Copied "{text}" to clipboard.</p>
|
||||
<p>
|
||||
{showInNotification
|
||||
? `Copied "${String(text)}" to clipboard.`
|
||||
: 'Copied text to clipboard.'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Fade>
|
||||
|
|
Reference in a new issue