43 lines
1.6 KiB
JavaScript
43 lines
1.6 KiB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
|
|
import { d as debounce } from "./debounce-ZFxqVthq.js";
|
|
import { g as getQueryParams } from "./route-DlE7FdTW.js";
|
|
import { c as cn } from "./utils-DLCPGU0v.js";
|
|
import { usePage } from "@inertiajs/react";
|
|
import { Search } from "lucide-react";
|
|
import { useRef, useEffect } from "react";
|
|
const SearchInput = (props) => {
|
|
const { className, iconPosition = "left", placeholder = "Search", onChangeValue } = props;
|
|
const page = usePage();
|
|
const searchRef = useRef(null);
|
|
const params = getQueryParams(page.url);
|
|
const searchHandler = debounce(async (e) => {
|
|
const query = e.target.value;
|
|
onChangeValue(query);
|
|
}, 300);
|
|
useEffect(() => {
|
|
if (params["search"] && searchRef.current) {
|
|
searchRef.current.focus();
|
|
}
|
|
}, [page, params]);
|
|
return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full md:max-w-[260px]", className), children: [
|
|
/* @__PURE__ */ jsx(
|
|
"input",
|
|
{
|
|
type: "text",
|
|
ref: searchRef,
|
|
onChange: searchHandler,
|
|
placeholder,
|
|
className: cn(
|
|
"focus:border-input border-input focus-visible:border-ring focus-visible:ring-ring/50 h-9 w-full rounded-md border py-[15px] text-sm font-normal text-gray-500 focus:ring-0 focus:outline-0 focus-visible:ring-[3px]",
|
|
iconPosition === "left" ? "pr-4 pl-12" : "pr-12 pl-4"
|
|
),
|
|
defaultValue: params["search"] ?? ""
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(Search, { className: cn("absolute top-1/2 z-10 h-4 w-4 -translate-y-1/2 text-gray-700", iconPosition === "left" ? "left-4" : "right-4") })
|
|
] });
|
|
};
|
|
export {
|
|
SearchInput as S
|
|
};
|