feat(explorer): i have added a share button, which adds a query param… (#32)

* feat(explorer): i have added a share button, which adds a query param admin & copy text to clipboard

* feat(explorer): add button to share

Add button to share url

* feat(explorer): add a button

add a share url button, which will copy the url on clipboard

* refactor: code update

* Update apps/explorer/src/components/SearchBar.tsx

Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>

* Update apps/explorer/src/app/[network]/page.tsx

Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>

---------

Co-authored-by: Vivian Plasencia <v.pcalana@gmail.com>

Author: shubhamku044

apps/explorer/src/app/[network]/page.tsx

@@ -59,19 +59,34 @@ export default function Network() {
         filterGroups(adminParam || groupIdParam || "")
     }, [adminParam, groupIdParam, filterGroups])
 
+    const handleShare = () => {
+        const url = window.location.href
+
+        navigator.clipboard.writeText(url)
+    }
+
     return loading ? (
         <div className="flex justify-center items-center h-screen">
             <div className="loader" />
         </div>
     ) : (
         allGroups && (
             <div className="mx-auto max-w-7xl px-4 lg:px-8 pt-20">
-                <SearchBar
-                    className="mb-6"
-                    placeholder="Group ID, Admin"
-                    onChange={filterGroups}
-                    queryParam={queryParam}
-                />
+                <div className="flex mb-6 gap-4">
+                    <SearchBar
+                        className="!mt-0 flex-1"
+                        placeholder="Group ID, Admin"
+                        onChange={filterGroups}
+                        queryParam={queryParam}
+                    />
+                    <button
+                        type="button"
+                        className="flex bg-blue-950 text-white items-center justify-center px-4 rounded-md"
+                        onClick={handleShare}
+                    >
+                        Copy Link
+                    </button>
+                </div>
 
                 <div className="flex justify-center flex-col pb-10 font-[family-name:var(--font-geist-sans)]">
                     <ul className="divide-y divide-gray-300 min-w-xl">

apps/explorer/src/components/SearchBar.tsx

@@ -3,7 +3,14 @@
 import { FaSearch } from "react-icons/fa"
 import { useState, useEffect, ChangeEvent } from "react"
 
-export default function SearchBar({ placeholder, onChange, className, queryParam }: any) {
+interface ISearchBarProps {
+    placeholder: string
+    onChange: (value: string) => void
+    className?: string
+    queryParam?: string | null
+}
+
+export default function SearchBar({ placeholder, onChange, className, queryParam }: ISearchBarProps) {
     const [searchQuery, setSearchQuery] = useState("")
     useEffect(() => {
         if (queryParam) {
@@ -15,6 +22,14 @@ export default function SearchBar({ placeholder, onChange, className, queryParam
         const { value } = event.target
         setSearchQuery(value)
         onChange(value)
+        const url = new URL(window.location.href)
+        url.search = ""
+        if(value.startsWith("0x")) {
+            url.searchParams.set("admin", value)
+        } else {
+            url.searchParams.set("groupid", value)
+        }
+        window.history.pushState({}, "", url.toString())
     }
 
     return (