From eafd1e382f92d5e6a21cbfa29ea4bdbe678e5c35 Mon Sep 17 00:00:00 2001
From: Ogheneyoma <Lawrenceyoma@gmail.com>
Date: Thu, 12 Sep 2024 16:56:26 +0100
Subject: [PATCH 1/2] fix(ui): added component for users to contribute missing
 search terms

---
 src/components/islands/search.jsx | 42 ++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components/islands/search.jsx b/src/components/islands/search.jsx
index 52e6c98..cc05fcd 100644
--- a/src/components/islands/search.jsx
+++ b/src/components/islands/search.jsx
@@ -227,7 +227,8 @@ function SearchResult({ result = [], cursor, searchTerm }) {
         /**
          * @todo add message suggesting adding/contributing the word to dictionary
          */
-        <p className="p-2 md:p-4">No Result found</p>
+        // <p className="p-2 md:p-4">No Result found</p>
+        <SearchSuggestionContribution searchTerm={searchTerm}/>
       ) : ( 
         result.map(({ doc }, i) => (
           <a key={i}
@@ -252,4 +253,43 @@ function SearchResult({ result = [], cursor, searchTerm }) {
       )}
     </div>
   );
+}
+
+function SearchSuggestionContribution({ searchTerm }){
+  return (
+    <section className="rounded-lg border shadow-sm">
+      <div className="space-y-1.5 p-3 md:p-6 flex flex-col lg:flex-row lg:items-center justify-between gap-4">
+        <div className="space-y-1">
+          <h3 className="font-semibold tracking-tight text-2xl">
+            No Result found for{" "}
+            <span className="font-medium">{searchTerm}</span>
+          </h3>
+          <p className="text-sm">
+            Help add the word <span className="font-medium">{searchTerm}</span>{" "}
+            to jargon.dev.
+          </p>
+        </div>
+        <a
+          className="flex items-center w-fit justify-center no-underline px-4 py-2 rounded-md border border-gray-200 bg-white hover:bg-gray-100 text-sm shadow-sm hover:shadow transition-colors"
+          href="/editor/new"
+        >
+          <span>Start Now</span>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width={1.5}
+            stroke="currentColor"
+            className="w-4 h-4"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"
+            />
+          </svg>
+        </a>
+      </div>
+    </section>
+  );
 }
\ No newline at end of file

From 8c9ce54dc153ca1586bb05a0c02770b90006326c Mon Sep 17 00:00:00 2001
From: babblebey <babblebey@gmail.com>
Date: Sat, 14 Sep 2024 12:30:00 +0100
Subject: [PATCH 2/2] feat: add `useDebounce` hook

---
 src/lib/hooks/use-debounce.js | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 src/lib/hooks/use-debounce.js

diff --git a/src/lib/hooks/use-debounce.js b/src/lib/hooks/use-debounce.js
new file mode 100644
index 0000000..e8a7c40
--- /dev/null
+++ b/src/lib/hooks/use-debounce.js
@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * Hook that delays invoking an operation until after wait milliseconds
+ * @param {any} value 
+ * @param {number} delay 
+ * @returns {any}
+ */
+export default function useDebounce(value, delay) {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}
\ No newline at end of file