import { Link } from 'react-router-dom'; import { useEffect, useState } from 'react'; import CodeHighlight from '../../components/Highlight'; import { CopyToClipboard } from 'react-copy-to-clipboard'; import Swal from 'sweetalert2'; import { setPageTitle } from '../../store/themeConfigSlice'; import { useDispatch } from 'react-redux'; const Clipboard = () => { const dispatch = useDispatch(); useEffect(() => { dispatch(setPageTitle('Clipboard')); }); const [codeArr, setCodeArr] = useState([]); const toggleCode = (name: string) => { if (codeArr.includes(name)) { setCodeArr((value) => value.filter((d) => d !== name)); } else { setCodeArr([...codeArr, name]); } }; const [message1, setMessage1] = useState('http://www.admin-dashboard.com'); const [message2, setMessage2] = useState('Lorem ipsum dolor sit amet, consectetur adipiscing elit...'); const message3 = '22991'; const message4 = 'http://www.admin-dashboard.com/code'; const showMessage = (message: String = '') => { const toast = Swal.mixin({ toast: true, position: 'top', showConfirmButton: false, timer: 3000, }); toast.fire({ icon: 'success', title: message || 'Copied successfully.', padding: '10px 20px', }); }; return (
  • Forms
  • Clipboard
{/* Copy from input */}
Copy from input
setMessage1(e.target.value)} />
{ if (result) { showMessage(); } }} > { if (result) { showMessage('Cut successfully.'); } }} >
{codeArr.includes('code1') && ( 
{`import { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
const [message1, setMessage1] = useState('http://www.admin-dashboard.com');



     setMessage1(e.target.value)} />
    

         {
                if (result) {
                    showMessage();
                }
            }}
        >
            
        
         {
                if (result) {
                    showMessage('Cut successfully.');
                }
            }}
        >
            
        
    


`}
 )}
{/* Copy form Textarea */}
Copy form Textarea
{ if (result) { showMessage(); } }} > { if (result) { showMessage('Cut successfully.'); } }} >
{codeArr.includes('code2') && ( 
{`import { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
const [message2, setMessage2] = useState('Lorem ipsum dolor sit amet, consectetur adipiscing elit...');



    
    

         {
                if (result) {
                    showMessage();
                }
            }}
        >
            
        
         {
                if (result) {
                    showMessage('Cut successfully.');
                }
            }}
        >
            
        
    


`}
 )}
{/* */}
Copy Text from Paragraph

Here is your OTP 22991 .

Please do not share it to anyone

{ if (result) { showMessage(); } }} >
{codeArr.includes('code3') && ( 
{`import { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
const message3 = '22991';



    

        Here is your OTP
        
            22991
        
        .
    

    
Please do not share it to anyone

    

         {
                if (result) {
                    showMessage();
                }
            }}
        >
            
        
    


`}
 )}
{/* Advanced */}
Copy Hidden Text (Advanced)

{'Link -> '} http://www.admin-dashboard.com/code

2291
{ if (result) { showMessage(); } }} > { if (result) { showMessage(); } }} >
{codeArr.includes('code4') && ( 
{`import { useState } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
const message4 = 'http://www.admin-dashboard.com/code';



    

         {'Link -> '} 
         http://www.admin-dashboard.com/code
    

    
        2291
    
    

         {
                if (result) {
                    showMessage();
                }
            }}
        >
            
        
         {
                if (result) {
                    showMessage();
                }
            }}
        >
            
        
    


`}
 )}
); }; export default Clipboard;