Updated search input

src/components/search-bar.tsx

@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils"
 import { Search } from "lucide-react"
 import { useRouter } from "next/navigation"
 import { useState } from "react"
+import { Button } from "./ui/button"
 
 export function SearchBar({ navbar }: { navbar?: boolean }) {
     const [input, setInput] = useState("")
@@ -13,14 +14,6 @@ export function SearchBar({ navbar }: { navbar?: boolean }) {
     async function handleSearch(e: React.FormEvent) {
         e.preventDefault()
 
-        // const validatedPlayer = await validatePlayer(input.trim())
-        //
-        // if (validatedPlayer.error === true) {
-        //     toast.error(validatedPlayer.message)
-        //     setInput("")
-        //     return
-        // }
-
         if (input.trim()) {
             router.push(`/player/${encodeURIComponent(input.trim())}`)
         }
@@ -29,25 +22,25 @@ export function SearchBar({ navbar }: { navbar?: boolean }) {
         }
     }
 
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter") {
-            handleSearch(e)
-        }
-    }
-
     return (
         <div className={cn("w-full max-w-4xl px-4", !navbar && "mt-8")}>
             <form onSubmit={handleSearch}>
-                <div className="relative">
+                <div className="flex gap-2">
-                    <Search className="absolute left-3 top-1/2 w-4 h-4 transform -translate-y-1/2 text-muted-foreground" />
                     <Input
                         type="text"
                         placeholder={!navbar ? "Search for a player..." : ""}
-                        className="pl-10"
+                        className="px-5"
                         value={input}
                         onChange={(e) => setInput(e.target.value)}
-                        onKeyDown={handleKeyDown}
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter") {
+                                handleSearch(e)
+                            }
+                        }}
                     />
+                    <Button type="submit">
+                        <Search />
+                    </Button>
                 </div>
             </form>
         </div>