76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import React, { useState } from "react";
|
|
import { Search } from "lucide-react";
|
|
import {
|
|
Dialog,
|
|
DialogTrigger,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogClose,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { router } from "@inertiajs/react";
|
|
|
|
const SearchDialog: React.FC = () => {
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
|
|
const handleSearch = (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
if (searchQuery.trim()) {
|
|
router.visit(`/search?q=${encodeURIComponent(searchQuery)}`, {
|
|
preserveState: true,
|
|
preserveScroll: true,
|
|
});
|
|
setSearchQuery(""); // Clear input setelah search
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="bg-green-800/90 hover:bg-green-700 text-white p-2 rounded-full"
|
|
>
|
|
<Search className="h-6 w-6" />
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="bg-white text-black p-6 rounded-lg w-[90%] max-w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="text-lg font-bold text-center">
|
|
Ketik Pencarianmu di sini...
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
<form
|
|
onSubmit={handleSearch}
|
|
className="flex items-center gap-2 w-full"
|
|
>
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="bg-gray-100 px-3 py-2 rounded-lg focus:outline-none w-full"
|
|
/>
|
|
<Button
|
|
type="submit"
|
|
className="bg-green-700 hover:bg-green-600 text-white p-2 rounded-lg"
|
|
>
|
|
<Search className="h-5 w-5" />
|
|
</Button>
|
|
</form>
|
|
{/* <DialogClose asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
|
|
>
|
|
✕
|
|
</Button>
|
|
</DialogClose> */}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default SearchDialog;
|