File size: 1,277 Bytes
caae15f
 
fb3baa1
 
caae15f
7d9d30d
caae15f
7d9d30d
caae15f
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// SearchInput.tsx

import { Button } from "@/app/components/ui/button";
import { Input } from "@/app/components/ui/input";
import { Search } from "lucide-react";
import { SearchHandler } from "@/app/components/ui/search/search.interface";

const SearchInput: React.FC<SearchHandler> = ({
    query,
    isLoading,
    onInputChange,
    onSearchSubmit,
}) => {
    return (
        <form
            onSubmit={onSearchSubmit}
            className="flex w-full items-start justify-between gap-4 rounded-xl bg-white dark:bg-zinc-700/30 p-4 shadow-xl"
        >
            <Input
                autoFocus
                name="query"
                placeholder="Enter a text to search..."
                value={query}
                onChange={onInputChange}
                className="flex-1 bg-white dark:bg-zinc-500/30"
            />
            <Button type="submit" disabled={isLoading} className="hidden md:flex items-center transition duration-300 ease-in-out transform hover:scale-110">
                Search
            </Button>
            <Button type="submit" disabled={isLoading} className="md:hidden"> {/* Hide on larger screens */}
                <Search className="h-5 w-5" />
            </Button>
        </form>
    );
};

export default SearchInput;