components/Searching/SearchInput.tsx

import { Input } from "@nextui-org/react";
import { forwardRef, Ref } from "react";
import { MdSearch } from "react-icons/md";

type SearchInputProps = {
    setQuery: (query: string | null) => void;
};

const SearchInput = (
    { setQuery }: SearchInputProps,
    ref: Ref<HTMLInputElement>,
) => {
    return (
        <Input
            ref={ref}
            isClearable
            radius="lg"
            classNames={{
                label: "text-black/50 dark:text-white/90",
                input: [
                    "bg-transparent",
                    "text-black/90 dark:text-white/90",
                    "placeholder:text-default-700/50 dark:placeholder:text-white/60",
                ],
                innerWrapper: "bg-transparent",
                inputWrapper: [
                    "shadow-xl",
                    "bg-default-200/50",
                    "dark:bg-default/60",
                    "backdrop-blur-xl",
                    "backdrop-saturate-200",
                    "hover:bg-default-200/70",
                    "dark:hover:bg-default/70",
                    "group-data-[focus=true]:bg-default-200/50",
                    "dark:group-data-[focus=true]:bg-default/60",
                    "!cursor-text",
                ],
            }}
            onValueChange={setQuery}
            placeholder="Type to search..."
            startContent={
                <MdSearch
                    className="text-black/50 mt-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0"
                    size={23}
                />
            }
        />
    );
};

export default forwardRef(SearchInput);
1	import { Input } from "@nextui-org/react";
2	import { forwardRef, Ref } from "react";
3	import { MdSearch } from "react-icons/md";
4
5	type SearchInputProps = {
6	setQuery: (query: string \| null) => void;
7	};
8
9	const SearchInput = (
10	{ setQuery }: SearchInputProps,
11	ref: Ref<HTMLInputElement>,
12	) => {
13	return (
14	<Input
15	ref={ref}
16	isClearable
17	radius="lg"
18	classNames={{
19	label: "text-black/50 dark:text-white/90",
20	input: [
21	"bg-transparent",
22	"text-black/90 dark:text-white/90",
23	"placeholder:text-default-700/50 dark:placeholder:text-white/60",
24	],
25	innerWrapper: "bg-transparent",
26	inputWrapper: [
27	"shadow-xl",
28	"bg-default-200/50",
29	"dark:bg-default/60",
30	"backdrop-blur-xl",
31	"backdrop-saturate-200",
32	"hover:bg-default-200/70",
33	"dark:hover:bg-default/70",
34	"group-data-[focus=true]:bg-default-200/50",
35	"dark:group-data-[focus=true]:bg-default/60",
36	"!cursor-text",
37	],
38	}}
39	onValueChange={setQuery}
40	placeholder="Type to search..."
41	startContent={
42	<MdSearch
43	className="text-black/50 mt-0.5 dark:text-white/90 text-slate-400 pointer-events-none flex-shrink-0"
44	size={23}
45	/>
46	}
47	/>
48	);
49	};
50
51	export default forwardRef(SearchInput);