70 lines
1.9 KiB
TypeScript
70 lines
1.9 KiB
TypeScript
import React from "react";
|
|
import { useSearchParams } from "@remix-run/react";
|
|
import AppInput from "./AppInput";
|
|
import { Search as SearchIcon } from "lucide-react";
|
|
import FilterDrawer from "./FilterDrawer";
|
|
|
|
interface SearchTopBarProps {
|
|
searchValue: string;
|
|
setSearchValue: (value: string) => void;
|
|
placeholder?: string;
|
|
minimumPrice?: number;
|
|
maximumPrice?: number;
|
|
onSearch?: () => void;
|
|
}
|
|
|
|
const SearchTopBar: React.FC<SearchTopBarProps> = ({
|
|
searchValue,
|
|
setSearchValue,
|
|
placeholder = "جستجو...",
|
|
minimumPrice = 0,
|
|
maximumPrice = 10000000,
|
|
onSearch,
|
|
}) => {
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const isChangedSearchBar = searchValue !== (searchParams.get("q") || "");
|
|
|
|
const handleSearch = () => {
|
|
if (onSearch) {
|
|
onSearch();
|
|
return;
|
|
}
|
|
|
|
if (isChangedSearchBar) {
|
|
const params = new URLSearchParams(searchParams);
|
|
if (searchValue.trim()) {
|
|
params.set("q", searchValue);
|
|
} else {
|
|
params.delete("q");
|
|
}
|
|
setSearchParams(params, { replace: true });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col gap-4 py-4 px-4 w-full sticky top-0 z-30 bg-WHITE">
|
|
<div className="flex items-center justify-center gap-2 rounded-[10px] w-full relative">
|
|
<AppInput
|
|
inputIcon={SearchIcon}
|
|
inputDir="rtl"
|
|
inputTitle={""}
|
|
onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
if (e.key === "Enter") {
|
|
handleSearch();
|
|
}
|
|
}}
|
|
className="bg-WHITE2 focus:border-blue-500"
|
|
inputValue={searchValue}
|
|
inputPlaceholder={placeholder}
|
|
inputOnChange={(e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setSearchValue(e.target.value);
|
|
}}
|
|
/>
|
|
<FilterDrawer minimumPrice={minimumPrice} maximumPrice={maximumPrice} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SearchTopBar;
|