30 lines
883 B
TypeScript
30 lines
883 B
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { useState } from 'react'
|
||
|
|
import { useRouter } from 'next/navigation'
|
||
|
|
import { SearchIcon } from 'lucide-react'
|
||
|
|
|
||
|
|
export default function Search() {
|
||
|
|
const [search, setSearch] = useState('')
|
||
|
|
const router = useRouter()
|
||
|
|
|
||
|
|
const handleSearch = (e: React.FormEvent) => {
|
||
|
|
e.preventDefault()
|
||
|
|
router.push(`/?search=${encodeURIComponent(search)}`)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<form onSubmit={handleSearch} className="relative">
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={search}
|
||
|
|
onChange={(e) => setSearch(e.target.value)}
|
||
|
|
placeholder="Search server packs..."
|
||
|
|
className="w-full p-2 pl-10 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
|
|
/>
|
||
|
|
<SearchIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||
|
|
</form>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|