?HAMA

Edit File Size: 3.15 KB

//proc/thread-self/root/home/byroehnu/easetack.com/resources/js/Frontend/Components/Header/GlobalSearch.jsx

Text Base64

import translate from "@/utils/translate"
import { router } from "@inertiajs/react"
import React, { useState, useRef, useEffect } from "react"

export default function GlobalSearch() {
    const [searchQuery, setSearchQuery] = useState("")
    const [toggle, setToggle] = useState(false)
    const searchFormRef = useRef(null)
    const searchToggleRef = useRef(null)

// Handle click outside
    useEffect(() => {
        const handleClickOutside = (event) => {
            if (
                searchFormRef.current &&
                searchToggleRef.current &&
                !searchFormRef.current.contains(event.target) &&
                !searchToggleRef.current.contains(event.target)
            ) {
                setToggle(false)
            }
        }

// Add event listener when component mounts
        document.addEventListener("mousedown", handleClickOutside)

// Clean up event listener when component unmounts
        return () => {
            document.removeEventListener("mousedown", handleClickOutside)
        }
    }, [])

// Handle search submission
    const getResults = (query) => {
        router.get(route("search.name"), { search: query }, { preserveState: true })
    }

const handleSubmit = (event) => {
        event.preventDefault()
        getResults(searchQuery)
    }

return (
        <>
            <span ref={searchToggleRef} className="cs_search_mobile_toggle" onClick={() => setToggle(!toggle)}>
                <svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M18.9996 19L12.9997 13M14.9996 8C14.9996 11.866 11.8656 15 7.99963 15C4.13364 15 0.999634 11.866 0.999634 8C0.999634 4.13401 4.13364 1 7.99963 1C11.8656 1 14.9996 4.13401 14.9996 8Z"
                        stroke="currentColor"
                        strokeWidth={2}
                        strokeLinecap="round"
                        strokeLinejoin="round"
                    />
                </svg>
            </span>
            <form ref={searchFormRef} onSubmit={handleSubmit} className={`cs_header_search_form${toggle ? " active" : ""}`}>
                <input
                    type="text"
                    placeholder={translate("Search")}
                    className="cs_header_search_field"
                    value={searchQuery}
                    onChange={(e) => setSearchQuery(e.target.value)}
                />
                <button type="submit" className="cs_header_submit_btn">
                    <svg width={20} height={20} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M18.9996 19L12.9997 13M14.9996 8C14.9996 11.866 11.8656 15 7.99963 15C4.13364 15 0.999634 11.866 0.999634 8C0.999634 4.13401 4.13364 1 7.99963 1C11.8656 1 14.9996 4.13401 14.9996 8Z"
                            stroke="currentColor"
                            strokeWidth={2}
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        />
                    </svg>
                </button>
            </form>
        </>
    )
}

Exit & Reset Text mode: syntax highlighting auto-detects file type.

Name	Size	Perms	Modified	Actions
DropDown.js	490 B	lrw-rw-rw-	2025-04-08 04:12:57	Edit Download recursive recursive
GlobalSearch.jsx	3.15 KB	lrw-rw-rw-	2025-04-27 09:55:03	Edit Download recursive recursive
Header2.jsx	8.03 KB	lrw-rw-rw-	2025-04-26 11:30:31	Edit Download recursive recursive
Header3.jsx	10.80 KB	lrw-rw-rw-	2025-04-26 11:30:31	Edit Download recursive recursive
Header4.jsx	13.22 KB	lrw-rw-rw-	2025-04-26 11:30:31	Edit Download recursive recursive
Header5.jsx	11.64 KB	lrw-rw-rw-	2025-04-26 11:30:31	Edit Download recursive recursive
Header6.jsx	8.18 KB	lrw-rw-rw-	2025-04-26 11:30:31	Edit Download recursive recursive
Header7.jsx	8.15 KB	lrw-rw-rw-	2025-04-26 11:30:31	Edit Download recursive recursive
Header8.jsx	7.79 KB	lrw-rw-rw-	2025-04-26 11:30:31	Edit Download recursive recursive
Header9.jsx	10.26 KB	lrw-rw-rw-	2025-04-26 11:30:31	Edit Download recursive recursive
Header10.jsx	7.77 KB	lrw-rw-rw-	2025-04-26 11:30:31	Edit Download recursive recursive
index.jsx	11.10 KB	lrw-rw-rw-	2025-04-27 09:55:03	Edit Download recursive recursive
LanguageDropdown.js	1.62 KB	lrw-rw-rw-	2025-04-24 07:51:57	Edit Download recursive recursive
SideHeader.js	4.71 KB	lrw-rw-rw-	2025-04-08 04:12:57	Edit Download recursive recursive

Directory Contents