feature/copy-clipboard

ArunGovil · Dec 5, 2022 · 640e849 · 640e849
1 parent eac3ca3
commit 640e849
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 28 deletions.
diff --git a/components/CodeCard.tsx b/components/CodeCard.tsx
@@ -1,15 +1,64 @@
-import React from "react";
-
+import { useState } from "react";
 interface CodeCardProps {
   id: number;
   title: string;
   code: string;
 }
+
 export default function CodeCard({ id, title, code }: CodeCardProps) {
+  const [isCopied, setCopied] = useState(false);
+  const copyToClipboard = () => {
+    const reset = () => {
+      setCopied(false);
+    };
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(reset, 2000);
+  };
   return (
     <li key={id}>
       <p className="mt-8 mb-8">{title}</p>
-      <code className="bg-slate-700 p-4 rounded-md">{code}</code>
+      <div className=" w-full max-w-5xl bg-transparent border border-slate-800 rounded-md mt-4 p-4 relative">
+        <button
+          onClick={copyToClipboard}
+          className="absolute right-0 top-0 m-2 p-1 rounded-md hover:bg-gradient-to-br from-[#FF4D4D] to-orange-500"
+        >
+          {isCopied ? (
+            <svg
+              className="w-5 h-5 rounded-md "
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.5"
+                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
+              ></path>
+            </svg>
+          ) : (
+            <svg
+              className="w-5 h-5 rounded-md "
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.5"
+                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+              ></path>
+            </svg>
+          )}
+        </button>
+        <pre>
+          <code>{code} </code>
+        </pre>
+      </div>
     </li>
   );
 }
diff --git a/components/SearchListing.tsx b/components/SearchListing.tsx
@@ -60,7 +60,7 @@ export default function SearchListing() {
   };
 
   return (
-    <div className="flex flex-col justify-center items-center p-4 w-full min-h-[90vh] max-w-5xl mt-8">
+    <div className="flex flex-col justify-center items-center p-4 w-full min-h-[90vh] max-w-5xl mt-2">
       <section className="mt-8 w-full">
         {isLoading ? returnLoading() : returnResult()}
       </section>

diff --git a/components/SecondarySearch.tsx b/components/SecondarySearch.tsx
@@ -26,31 +26,15 @@ export default function SecondarySearch() {
     return () => clearTimeout(timer);
   }, [placeholder]);
 
-  const returnSuggestions = () => {
-    return (
-      <div className="bg-black border p-2 border-slate-800 mt-1 rounded-md w-96 z-50 absolute">
-        <ul>
-          {technology.map((item) => (
-            <li
-              className="mt-2 text-sm font-light text-slate-400 cursor-pointer hover:text-white hover:bg-gradient-to-br from-[#FF4D4D] to-orange-500 pt-1 pb-1 pl-1 rounded-md"
-              key={item.id}
-            >
-              {item.title}
-            </li>
-          ))}
-        </ul>
-      </div>
-    );
-  };
   return (
     <div>
-      <div className="mt-0 flex">
+      <div className="mt-12 flex">
         <input
           onChange={(e) => setQuery(e.target.value)}
           className="bg-black border-l border-r border-t border-b rounded-l-lg p-2 border-slate-800 h-12 w-96 max-w-[75vw] text-sm"
           placeholder={placeholder.placeholder}
         />
-        <div className="p-2 flex items-center justify-center cursor-pointer bg-gradient-to-br from-[#FF4D4D] to-orange-500 rounded-r-lg text-sm pl-3 pr-3">
+        <div className="p-2 flex items-center justify-center bg-gradient-to-br from-[#FF4D4D] to-orange-500 rounded-r-lg text-sm pl-3 pr-3">
           <svg
             className="w-6 h-6"
             fill="none"
@@ -59,15 +43,14 @@ export default function SecondarySearch() {
             xmlns="http://www.w3.org/2000/svg"
           >
             <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="1.5"
               d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
             ></path>
           </svg>
         </div>
       </div>
-      {isVisible && returnSuggestions()}
     </div>
   );
 }
diff --git a/pages/details.tsx b/pages/details.tsx
@@ -1,5 +1,5 @@
 import Head from "next/head";
-import { Header, Footer, SearchListing } from "../components";
+import { Header, Footer, SearchListing, SecondarySearch } from "../components";
 
 export default function Details() {
   return (
@@ -10,7 +10,8 @@ export default function Details() {
         <link rel="icon" href="/img/frame.png" />
       </Head>
       <main className="flex flex-col items-center">
-        <Header showSearch={true} />
+        <Header showSearch={false} />
+        <SecondarySearch />
         <SearchListing />
         <Footer />
       </main>