search-input.tsx

"use client"

import { cn } from '@/lib/utils';
import { usePathname, useRouter } from 'next/navigation';
import { useState } from 'react';
import { Icons } from './icons';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { toast } from './ui/use-toast';

interface DocsSearchProps extends React.HTMLAttributes<HTMLFormElement> { }

export default function SearchInput({ className, ...props }: DocsSearchProps) {
    const [searchQuery, setSearchQuery] = useState("");
    const router = useRouter();
    const pathname = usePathname();

    function onSearch(event: React.FormEvent) {
        event.preventDefault()

        if (pathname === "/games") {
            if (!searchQuery) {
                router.push(pathname)
                return
            }

            const encoededQuery = encodeURIComponent(searchQuery)
            router.push(`${pathname}?search=${encoededQuery}`)
        } else {
            return toast({
                title: "Work in Progress!",
                description: "Sorry, but global search is not available yet... ㅤYou can test it out in the games page though!",
            })
        }
    };

    return (
        <form
            onSubmit={onSearch}
            className={cn("relative w-full flex justify-end items-center", className)}
            {...props}
        >
            <Input
                type="search"
                placeholder="Search..."
                className="rounded-full pr-12"
                value={searchQuery}
                onChange={(event) => setSearchQuery(event.target.value)}
            />
            <Button size="lg" className="absolute align-middle h-8 px-2.5 mr-1">
                <Icons.arrowRight className="h-3 w-3" />
            </Button>
        </form>
    );
}