60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Button } from "@/shared/components/button/button";
|
||
|
|
import { Search } from "lucide-react";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import { useState } from "react";
|
||
|
|
|
||
|
|
export function HeroSearch() {
|
||
|
|
const router = useRouter();
|
||
|
|
const [input, setInput] = useState("");
|
||
|
|
|
||
|
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
setInput(e.target.value);
|
||
|
|
};
|
||
|
|
const handleSearch = () => {
|
||
|
|
const searchParams = new URLSearchParams();
|
||
|
|
|
||
|
|
if (input) searchParams.set("query", input);
|
||
|
|
searchParams.set("open-catalog", "true");
|
||
|
|
|
||
|
|
router.push(`/maps?${searchParams.toString()}`);
|
||
|
|
};
|
||
|
|
|
||
|
|
const openMap = () => {
|
||
|
|
router.push(`/maps?open-catalog=true`);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="@container/hero-search container pb-20">
|
||
|
|
<div className="mx-auto flex max-w-[786px] flex-col gap-4 rounded-2xl bg-white @xl/hero-search:flex-row @xl/hero-search:py-2 @xl/hero-search:pr-2 @xl/hero-search:pl-8 @3xl/hero-search:mb-[150px]">
|
||
|
|
<div className="flex grow items-center gap-x-3 rounded-2xl bg-white px-3.5 py-4 @xl/hero-search:p-0">
|
||
|
|
<Search className="shrink-0 text-gray-400" size={18} />
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
placeholder="Eksplor data berdasarkan tema atau kata kunci"
|
||
|
|
className="w-full outline-0"
|
||
|
|
value={input}
|
||
|
|
onChange={handleChange}
|
||
|
|
onKeyDown={(e) => {
|
||
|
|
if (e.key === "Enter") {
|
||
|
|
handleSearch();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col gap-2 px-3 pb-2 @xl/hero-search:flex-row @xl/hero-search:items-center @xl/hero-search:p-0 @2xl/hero-search:grid @2xl/hero-search:grid-cols-[1fr_1px_1fr]">
|
||
|
|
<Button variant="danger" onClick={handleSearch}>
|
||
|
|
Cari
|
||
|
|
</Button>
|
||
|
|
<div className="hidden h-9 w-px bg-zinc-300 @xl/hero-search:block" />
|
||
|
|
<Button variant="primary" onClick={openMap}>
|
||
|
|
Buka peta
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|