NostrHTTP - <p>```js import Reac

@ Marth

2024-08-09 18:04:10

```js import React, { useRef, useEffect, useState, useMemo } from 'react'; import { OverlayPanel } from 'primereact/overlaypanel'; import ZapForm from './ZapForm'; import { ProgressSpinner } from 'primereact/progressspinner';

const ZapDisplay = ({ zapAmount, event, zapsLoading }) => { const op = useRef(null); const [extraLoading, setExtraLoading] = useState(false);

useMemo(() => {
    let timeout;
    if (!zapsLoading && zapAmount === 0) {
        setExtraLoading(true);
        timeout = setTimeout(() => setExtraLoading(false), 5000);
    }
    return () => clearTimeout(timeout);
}, [zapsLoading, zapAmount]);

return (
    <>
        <span className="text-xs cursor-pointer flex items-center relative hover:opacity-80" onClick={(e) => op.current.toggle(e)}>
            <i className="pi pi-bolt text-yellow-300"></i>
            <span className="relative flex items-center min-w-[20px] min-h-[20px]">
                {zapsLoading || zapAmount === null || extraLoading ? (
                    <ProgressSpinner className="absolute top-0 left-0 w-[20px] h-[20px]" strokeWidth="8" animationDuration=".5s" />
                ) : (
                    zapAmount
                )}
            </span>
        </span>
        <OverlayPanel className='w-[40%] h-[40%]' ref={op}>
            <ZapForm event={event} />
        </OverlayPanel>
    
)

}

export default ZapDisplay; ```

yakihonne.com iris.to jumble.social

导航栏

Home