components/Searching/Search.tsx

"use client";

import useIsDesktop from "@/hooks/useIsDesktop";
import usePlatform from "@/hooks/usePlatform";
import { Button } from "@mui/material";
import { useEffect, useRef, useState } from "react";
import { MdSearch } from "react-icons/md";
import SearchInput from "./SearchInput";
import SearchResults from "./SearchResults";

export default function Search() {
    const platform = usePlatform();
    const isDesktop = useIsDesktop();
    const ref = useRef<HTMLInputElement>(null);
    const [query, setQuery] = useState<string | null>(null);
    const [toggled, setToggled] = useState(false);

    useEffect(() => {
        const callback = (event: KeyboardEvent) => {
            if (
                event.code === "Slash" ||
                ((platform === "darwin" ? event.metaKey : event.ctrlKey) &&
                    event.code === "KeyK")
            ) {
                event.preventDefault();
                ref.current?.focus();
            }
        };

        window.addEventListener("keydown", callback);

        return () => window.removeEventListener("keydown", callback);
    }, [platform]);

    return (
        <>
            <div className="relative">
                {isDesktop && <SearchInput ref={ref} setQuery={setQuery} />}

                {query && isDesktop && (
                    <SearchResults
                        query={query}
                        onClose={() => setQuery(null)}
                    />
                )}

                {!isDesktop && (
                    <Button
                        style={{ minWidth: 0, color: "white" }}
                        onClick={() => {
                            setToggled(true);
                        }}
                    >
                        <MdSearch size={23} />
                    </Button>
                )}

                {!isDesktop && toggled && (
                    <div
                        className="fixed top-0 left-0 w-screen h-screen bg-black/30 z-[100000005]"
                        onClick={() => setToggled(false)}
                    >
                        <div
                            className="overflow-y-scroll bg-neutral-900 w-[calc(100vw-2rem)] h-[calc(80vh-4rem)] mx-[1rem] rounded-lg p-[1rem] absolute bottom-4"
                            onClickCapture={event => event.stopPropagation()}
                        >
                            <SearchInput ref={ref} setQuery={setQuery} />

                            {query && (
                                <SearchResults
                                    query={query}
                                    onClose={() => setQuery(null)}
                                />
                            )}
                        </div>
                    </div>
                )}
            </div>
        </>
    );
}
1	rakinar2	575	"use client";
2
3			import useIsDesktop from "@/hooks/useIsDesktop";
4			import usePlatform from "@/hooks/usePlatform";
5			import { Button } from "@mui/material";
6	rakinar2	626	import { useEffect, useRef, useState } from "react";
7	rakinar2	575	import { MdSearch } from "react-icons/md";
8	rakinar2	626	import SearchInput from "./SearchInput";
9			import SearchResults from "./SearchResults";
10	rakinar2	575
11			export default function Search() {
12			const platform = usePlatform();
13			const isDesktop = useIsDesktop();
14	rakinar2	626	const ref = useRef<HTMLInputElement>(null);
15			const [query, setQuery] = useState<string \| null>(null);
16			const [toggled, setToggled] = useState(false);
17	rakinar2	575
18			useEffect(() => {
19			const callback = (event: KeyboardEvent) => {
20			if (
21			event.code === "Slash" \|\|
22			((platform === "darwin" ? event.metaKey : event.ctrlKey) &&
23			event.code === "KeyK")
24			) {
25			event.preventDefault();
26	rakinar2	626	ref.current?.focus();
27	rakinar2	575	}
28			};
29
30			window.addEventListener("keydown", callback);
31
32			return () => window.removeEventListener("keydown", callback);
33	rakinar2	626	}, [platform]);
34	rakinar2	575
35			return (
36			<>
37	rakinar2	626	<div className="relative">
38			{isDesktop && <SearchInput ref={ref} setQuery={setQuery} />}
39
40			{query && isDesktop && (
41			<SearchResults
42			query={query}
43			onClose={() => setQuery(null)}
44			/>
45			)}
46
47	rakinar2	575	{!isDesktop && (
48			<Button
49	rakinar2	632	style={{ minWidth: 0, color: "white" }}
50	rakinar2	626	onClick={() => {
51			setToggled(true);
52			}}
53	rakinar2	575	>
54	rakinar2	626	<MdSearch size={23} />
55	rakinar2	575	</Button>
56			)}
57	rakinar2	626
58			{!isDesktop && toggled && (
59	rakinar2	575	<div
60	rakinar2	626	className="fixed top-0 left-0 w-screen h-screen bg-black/30 z-[100000005]"
61			onClick={() => setToggled(false)}
62	rakinar2	575	>
63	rakinar2	626	<div
64			className="overflow-y-scroll bg-neutral-900 w-[calc(100vw-2rem)] h-[calc(80vh-4rem)] mx-[1rem] rounded-lg p-[1rem] absolute bottom-4"
65			onClickCapture={event => event.stopPropagation()}
66			>
67			<SearchInput ref={ref} setQuery={setQuery} />
68
69			{query && (
70			<SearchResults
71			query={query}
72			onClose={() => setQuery(null)}
73			/>
74			)}
75			</div>
76	rakinar2	575	</div>
77			)}
78			</div>
79			</>
80			);
81			}