allbest/rekan_ai_fe
1
0
Fork 0
forked from amnannn/rekan_ai
Code Pull Requests Activity

add handle search

Browse Source
This commit is contained in:
Yogamnan 2025-02-19 14:55:24 +07:00
parent aa566e188a
commit e9dc997830
1 changed files with 33 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/beranda/Header.jsx
View File

@ -7,6 +7,28 @@ const Header = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [isSolusiOpen, setIsSolusiOpen] = useState(false);
const [isProdukOpen, setIsProdukOpen] = useState(false);
const [searchQuery, setSearchQuery] = useState("")
const handleSearch = (e) => {
setSearchQuery(e.target.value)
}
const handleSearchSubmit = (e) => {
e.preventDefault()
const query = searchQuery.toLowerCase()
// Solutions mapping
if (query.includes("solusi personal") || query.includes("personal")) {
navigate("/SolusiPersonal")
} else if (query.includes("solusi startup") || query.includes("startup")) {
navigate("/SolusiStartup")
} else if (query.includes("solusi corporate") || query.includes("corporate") || query.includes("business")) {
navigate("/SolusiCorporate")
}
window.scrollTo({ top: 0, behavior: "smooth" })
setSearchQuery("") // Clear search after submission
}
// Referensi untuk mendeteksi klik di luar dropdown
const solusiRef = useRef(null);
@ -22,6 +44,7 @@ const Header = () => {
setIsProdukOpen(false);
}
}
// Tambahkan event listener saat dropdown terbuka
document.addEventListener("mousedown", handleClickOutside);
@ -72,7 +95,7 @@ const Header = () => {
</button>
{isProdukOpen && (
<div className="absolute left-[500px] -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
<div className="absolute left-[448px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1729px]">
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
<div className="flex justify-center gap-8">
{/* HR */}
@ -165,7 +188,7 @@ const Header = () => {
</button>
{isSolusiOpen && (
<div className="absolute left-64 -translate-x-1/2 top-full md:top-11 mt-2 w-[5000px]">
<div className="absolute left-[340px] -translate-x-1/2 top-full md:top-11 mt-2 w-[1729px]">
<div className="bg-customRed bg-opacity-80 rounded-xl p-8">
<div className="flex justify-center gap-8">
{/* Personal */}
@ -235,16 +258,21 @@ const Header = () => {
{/* Search Bar */}
<div className="hidden lg:flex items-center flex-1 max-w-xl mx-8">
<div className="relative w-full">
<form onSubmit={handleSearchSubmit} className="relative w-full">
<input
type="text"
placeholder="Pencarian..."
value={searchQuery}
onChange={handleSearch}
className="w-full h-12 px-4 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#5a55ff]"
/>
<button className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]">
<button
type="submit"
className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-[#5a55ff]"
>
<img src={search || "/placeholder.svg"} alt="search" className="w-5 h-5" />
</button>
</div>
</form>
</div>
{/* Konsultasi Button */}