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	rakinar2	627	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);