41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
"use client"
|
||
|
||
import { useState } from 'react'
|
||
import { useRouter } from 'next/navigation'
|
||
import { SearchIcon } from 'lucide-react'
|
||
import { Input } from "./ui/input"
|
||
import { Button } from "./ui/button"
|
||
|
||
export function Search() {
|
||
const [searchTerm, setSearchTerm] = useState('')
|
||
const router = useRouter()
|
||
|
||
const handleSearch = (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
if (searchTerm.trim()) {
|
||
router.push(`/search?q=${encodeURIComponent(searchTerm.trim())}`)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<form onSubmit={handleSearch} className="relative w-full max-w-lg">
|
||
<div className="flex">
|
||
<div className="relative flex-grow">
|
||
<Input
|
||
type="search"
|
||
placeholder="Искать на Store"
|
||
className="pl-10 pr-4 py-2 w-full rounded-l-md border-r-0"
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
/>
|
||
<SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||
</div>
|
||
<Button type="submit" className="rounded-l-none">
|
||
Найти
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
)
|
||
}
|
||
|