Add indicator when url is copied (#4) #12

merged

opened by

openwheel.racing 1 month ago targeting main

Add an indicator when the URL is copied, per issue #4. I had a hell of a time trying to get this to run on my computer for some reason (my computer seemingly can't find bun run build:raichu in the repo), so it was easier to just MVP'd it in using a vite react app with basic-ui locally and it worked well, just to test this page. It just changes the text "Copy API Key" to "Copied!" and it then resets back after 1500 ms.

options

unified split

Changed files

+14 -2

apps

web

src

layouts

Navbar

Navbar.tsx

+14 -2

apps/web/src/layouts/Navbar/Navbar.tsx

···

       76
       76
        
           return "";

     

       77
       77
        
         }, [data]);

     

       78
       78
        
       

     

       79
       79
       +
         const [tooltipContent, setTooltipContent] = useState("Copy API Key");

     

       80
       80
       +
       

     

       81
       81
       +
         const handleCopyClick = () => {

     

       82
       82
       +
           copy(webscrobblerWebhook);

     

       83
       83
       +
       

     

       84
       84
       +
           setTooltipContent("Copied!");

     

       85
       85
       +
       

     

       86
       86
       +
           setTimeout(() => {

     

       87
       87
       +
             setTooltipContent("Copy API Key");

     

       88
       88
       +
           }, 1500);

     

       89
       89
       +
         }

     

       90
       90
       +
       

     

       79
       91
        
         useEffect(() => {

     

       80
       92
        
           if (profile?.spotifyConnected && !!localStorage.getItem("spotify")) {

     

       81
       93
        
             localStorage.removeItem("spotify");

     
···

       351
       363
        
                     extension settings as a custom API URL:

     

       352
       364
        
                   </LabelMedium>

     

       353
       365
        
                   <Code className="mt-[15px]">{webscrobblerWebhook}</Code>

     

       354
       354
       -
                   <StatefulTooltip content="Copy API Key">

     

       366
       366
       +
                   <StatefulTooltip content={tooltipContent}>

     

       355
       367
        
                     <Copy

     

       356
       356
       -
                       onClick={() => copy(webscrobblerWebhook)}

     

       368
       368
       +
                       onClick={handleCopyClick}

     

       357
       369
        
                       size={18}

     

       358
       370
        
                       color="var(--color-text)"

     

       359
       371
        
                       className="ml-[5px] cursor-pointer"