Finished sidebar

src/components/search-bar.tsx

@@ -0,0 +1,57 @@
+"use client"
+
+import { Input } from "@/components/ui/input"
+import { validatePlayer } from "@/lib/hypixel/validatePlayer"
+import { cn } from "@/lib/utils"
+import { Search } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { useState } from "react"
+import { toast } from "sonner"
+
+export function SearchBar({ navbar }: { navbar?: boolean }) {
+    const [input, setInput] = useState("")
+    const router = useRouter()
+
+    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())}`)
+        }
+        if (navbar) {
+            setInput("")
+        }
+    }
+
+    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">
+                    <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+                    <Input
+                        type="text"
+                        placeholder={!navbar ? "Search for a player..." : ""}
+                        className="pl-10"
+                        value={input}
+                        onChange={(e) => setInput(e.target.value)}
+                        onKeyDown={handleKeyDown}
+                    />
+                </div>
+            </form>
+        </div>
+    )
+}