refactor: copy button

src/components/RoadCard/LongBadge.tsx

@@ -1,6 +1,9 @@
+import { useIsCopied } from '../../hooks/use-is-copied';
 import type { BadgeProps } from './RoadCardPage';
 
 export function LongBadge({ badgeUrl }: BadgeProps) {
+  const { isCopied, handleCopy } = useIsCopied();
+
   return (
     <div className="col-span-2">
       <a
@@ -17,17 +20,19 @@ export function LongBadge({ badgeUrl }: BadgeProps) {
       </a>
 
       <div className="mt-3 grid grid-cols-2 gap-2">
-        <button className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75">
-          Download
-        </button>
         <a
           className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75"
-          href={badgeUrl}
+          href={badgeUrl + '?type=png'}
-          target="_blank"
+          download
-          rel="noopener noreferrer"
         >
-          Copy Link
+          Download
         </a>
+        <button
+          className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75"
+          onClick={() => handleCopy(badgeUrl)}
+        >
+          {isCopied ? 'Copied!' : 'Copy Link'}
+        </button>
       </div>
     </div>
   );

src/components/RoadCard/RoadCardPage.tsx

@@ -5,6 +5,7 @@ import { WideBadge } from './WideBadge';
 import { LongBadge } from './LongBadge';
 
 import CopyIcon from '../../icons/copy.svg';
+import { useIsCopied } from '../../hooks/use-is-copied';
 
 export type BadgeProps = {
   badgeUrl: string;
@@ -12,7 +13,8 @@ export type BadgeProps = {
 
 export function RoadCardPage() {
   const [selectedBadge, setSelectedBadge] = useState<'long' | 'wide'>('long');
-  const [isCopied, setIsCopied] = useState(false);
+  const { isCopied, handleCopy } = useIsCopied();
+
   const token = Cookies.get(TOKEN_COOKIE_NAME);
   if (!token) {
     return null;
@@ -36,21 +38,6 @@ export function RoadCardPage() {
 </a>
   `.trim();
 
-  const handleCopyEmbed = () => {
-    navigator.clipboard.writeText(textareaContent);
-    setIsCopied(true);
-  };
-
-  useEffect(() => {
-    let timeout: ReturnType<typeof setTimeout>;
-    if (isCopied) {
-      timeout = setTimeout(() => {
-        setIsCopied(false);
-      }, 2000);
-    }
-    return () => clearTimeout(timeout);
-  }, [isCopied]);
-
   return (
     <>
       <div className="mb-8">
@@ -98,11 +85,11 @@ export function RoadCardPage() {
         {selectedBadge === 'wide' && <WideBadge badgeUrl={badgeUrl} />}
 
         <div className={`${selectedBadge === 'long' && 'col-span-3'}`}>
-          <div className="flex items-center gap-2 text-xs uppercase text-gray-400 leading-none">
+          <div className="flex items-center gap-2 text-xs uppercase leading-none text-gray-400">
             Embed
             <button
               className="flex items-center"
-              onClick={handleCopyEmbed}
+              onClick={() => handleCopy(textareaContent)}
             >
               <img src={CopyIcon} alt="Copy" className="inline-block h-4 w-4" />
               {isCopied && <span className="ml-2 text-green-500">Copied!</span>}

src/components/RoadCard/WideBadge.tsx

@@ -1,6 +1,8 @@
+import { useIsCopied } from '../../hooks/use-is-copied';
 import type { BadgeProps } from './RoadCardPage';
 
 export function WideBadge({ badgeUrl }: BadgeProps) {
+  const { isCopied, handleCopy } = useIsCopied();
   return (
     <div>
       <a
@@ -17,16 +19,18 @@ export function WideBadge({ badgeUrl }: BadgeProps) {
       </a>
 
       <div className="mt-3 grid grid-cols-2 gap-2">
-        <a className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75">
+        <a
+          className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75"
+          href={badgeUrl + '?type=png'}
+          download
+        >
           Download
         </a>
         <a
           className="flex h-7 items-center justify-center whitespace-nowrap rounded border border-gray-300 bg-gray-50 px-2 text-xs font-medium leading-none hover:opacity-75"
-          href={badgeUrl}
+          onClick={() => handleCopy(badgeUrl)}
-          target="_blank"
-          rel="noopener noreferrer"
         >
-          Copy Link
+          {isCopied ? 'Copied!' : 'Copy Link'}
         </a>
       </div>
     </div>

src/hooks/use-is-copied.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'preact/hooks';
+
+export function useIsCopied() {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const handleCopy = (text: string) => {
+    navigator.clipboard.writeText(text);
+    setIsCopied(true);
+  };
+
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout>;
+    if (isCopied) {
+      timeout = setTimeout(() => {
+        setIsCopied(false);
+      }, 2000);
+    }
+    return () => clearTimeout(timeout);
+  }, [isCopied]);
+
+  return { isCopied, handleCopy };
+}