feat: add copy button

bgd-labs · Feb 9, 2024 · 228027f · 228027f
1 parent f6a4d79
commit 228027f
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 28 deletions.
diff --git a/ui/src/components/Search.tsx b/ui/src/components/Search.tsx
@@ -1,10 +1,11 @@
 'use client';
+
 import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { cn } from '@/utils/cn';
 import { type Address } from '@/types';
 import Fuse, { FuseResult } from 'fuse.js';
 import { Box } from './Box';
-import { ChainIcon } from '@/components/ChainIcon';
+import { SearchResult } from './SearchResult';
 
 const fuseOptions = {
   isCaseSensitive: false,
@@ -89,36 +90,10 @@ export const Search = ({ addresses }: { addresses: Address[] }) => {
           onChange={(e) => setSearch(e.target.value)}
           className="outline-none py-3 px-11 w-full text-xl border border-2 border-transparent focus:border-blue-200 transition-all"
         />
-        <div className="text-brand-500 text-xs absolute top-1/2 right-3 -translate-y-1/2">
-          {search !== '' && results.length}
-        </div>
       </Box>
       {results.length !== 0 &&
         results.map((result) => (
-          <Box key={result.item.searchPath} isHoverable>
-            <a
-              className="px-3 pt-4 pb-4 flex gap-3 cursor-pointer"
-              href={result.item.link}
-              target='_blank'
-            >
-              <ChainIcon chainId={result.item.chainId} />
-              <div className="leading-none">
-                <div className="mb-2 flex flex-wrap gap-1">
-                  {result.item.path.map((p, i) => (
-                    <span
-                      key={i}
-                      className="text-brand-900 text-xs font-semibold leading-none rounded-sm bg-brand-100 border border-brand-300 py-1 px-1.5"
-                    >
-                      {p}
-                    </span>
-                  ))}
-                </div>
-                <div className="font-mono text-xs text-brand-500 truncate px-0.5 w-60 sm:w-full">
-                  {result.item.value}
-                </div>
-              </div>
-            </a>
-          </Box>
+          <SearchResult key={result.item.searchPath} result={result} />
         ))}
     </div>
   );

diff --git a/ui/src/components/SearchResult.tsx b/ui/src/components/SearchResult.tsx
@@ -0,0 +1,87 @@
+'use client';
+
+import { useState } from 'react';
+import { FuseResult } from 'fuse.js';
+import { Box } from '@/components/Box';
+import { ChainIcon } from '@/components/ChainIcon';
+import { cn } from '@/utils/cn';
+import { type Address } from '@/types';
+
+export const SearchResult = ({ result }: { result: FuseResult<Address> }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyClick = async (event: React.MouseEvent) => {
+    event.preventDefault();
+    event.stopPropagation();
+    await navigator.clipboard.writeText(result.item.value);
+    setCopied(true);
+    setTimeout(() => {
+      setCopied(false);
+    }, 1500);
+  };
+
+  return (
+    <Box isHoverable>
+      <a
+        className="px-3 pt-4 pb-4 flex gap-3 cursor-pointer"
+        href={result.item.link}
+        target="_blank"
+      >
+        <ChainIcon chainId={result.item.chainId} />
+        <div className="leading-none">
+          <div className="mb-2 flex flex-wrap gap-1">
+            {result.item.path.map((p, i) => (
+              <span
+                key={i}
+                className="text-brand-900 text-xs font-semibold leading-none rounded-sm bg-brand-100 border border-brand-300 py-1 px-1.5 truncate max-w-60 sm:max-w-full"
+              >
+                {p}
+              </span>
+            ))}
+          </div>
+          <div className="font-mono text-xs text-brand-500 truncate px-0.5 w-60 sm:w-full">
+            {result.item.value}
+          </div>
+        </div>
+        <button className="ml-auto px-4 opacity-30 hover:opacity-100" onClick={handleCopyClick}>
+          <span className="flex h-6 w-6 overflow-hidden">
+            <svg
+              className={cn(
+                'h-6 w-6 shrink-0 transition-all duration-150 ease-linear',
+                {
+                  ['-translate-x-full text-green-500']: copied,
+                },
+              )}
+              viewBox="0 0 50 50"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15 30.7361H11V11H31.5714V14.3833M39 18.8944V38.0667H19V18.8944H39Z"
+                stroke="currentColor"
+                strokeWidth="3"
+              />
+            </svg>
+            <svg
+              viewBox="0 0 50 50"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className={cn(
+                'h-6 w-6 shrink-0 translate-x-full transition-all duration-150 ease-linear',
+                {
+                  ['-translate-x-full text-green-500']: copied,
+                },
+              )}
+            >
+              <path
+                d="M14 24.8571L21.1719 33L41 12"
+                stroke="currentColor"
+                strokeWidth="4"
+              />
+            </svg>
+          </span>
+        </button>
+      </a>
+    </Box>
+  );
+};