components/Searching/Search.tsx

"use client";

import useIsDesktop from "@/hooks/useIsDesktop";
import usePlatform from "@/hooks/usePlatform";
import styles from "@/styles/Search.module.css";
import { Button } from "@mui/material";
import { useEffect, useState } from "react";
import { MdSearch } from "react-icons/md";
import SearchModal from "./SearchModal";

export default function Search() {
    const platform = usePlatform();
    const isDesktop = useIsDesktop();
    const [modalOpen, setModalOpen] = useState(false);

    useEffect(() => {
        const callback = (event: KeyboardEvent) => {
            if (
                event.code === "Slash" ||
                ((platform === "darwin" ? event.metaKey : event.ctrlKey) &&
                    event.code === "KeyK")
            ) {
                event.preventDefault();
                setTimeout(() => setModalOpen(true), 120);
            } else if (event.code === "Escape" && modalOpen) {
                event.preventDefault();
                setModalOpen(false);
            }
        };

        window.addEventListener("keydown", callback);

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

    return (
        <>
            <div className={styles.root}>
                {!isDesktop && (
                    <Button
                        style={{ minWidth: 0, color: "#fff" }}
                        className="text-white"
                        onClick={() => setModalOpen(true)}
                    >
                        <MdSearch size={23} style={{ color: "white" }} />
                    </Button>
                )}
                {isDesktop && <MdSearch size={25} />}
                {isDesktop && (
                    <div
                        className={styles.input}
                        onClick={() => setModalOpen(true)}
                    >
                        Search anything
                    </div>
                )}
                {isDesktop && (
                    <span className={styles.shortcut}>
                        {platform === "darwin" ? "⌘" : "Ctrl +"} K
                    </span>
                )}
            </div>
            {modalOpen && <SearchModal onClose={() => setModalOpen(false)} />}
        </>
    );
}
1	"use client";
2
3	import useIsDesktop from "@/hooks/useIsDesktop";
4	import usePlatform from "@/hooks/usePlatform";
5	import styles from "@/styles/Search.module.css";
6	import { Button } from "@mui/material";
7	import { useEffect, useState } from "react";
8	import { MdSearch } from "react-icons/md";
9	import SearchModal from "./SearchModal";
10
11	export default function Search() {
12	const platform = usePlatform();
13	const isDesktop = useIsDesktop();
14	const [modalOpen, setModalOpen] = useState(false);
15
16	useEffect(() => {
17	const callback = (event: KeyboardEvent) => {
18	if (
19	event.code === "Slash" \|\|
20	((platform === "darwin" ? event.metaKey : event.ctrlKey) &&
21	event.code === "KeyK")
22	) {
23	event.preventDefault();
24	setTimeout(() => setModalOpen(true), 120);
25	} else if (event.code === "Escape" && modalOpen) {
26	event.preventDefault();
27	setModalOpen(false);
28	}
29	};
30
31	window.addEventListener("keydown", callback);
32
33	return () => window.removeEventListener("keydown", callback);
34	}, [modalOpen]);
35
36	return (
37	<>
38	<div className={styles.root}>
39	{!isDesktop && (
40	<Button
41	style={{ minWidth: 0, color: "#fff" }}
42	className="text-white"
43	onClick={() => setModalOpen(true)}
44	>
45	<MdSearch size={23} style={{ color: "white" }} />
46	</Button>
47	)}
48	{isDesktop && <MdSearch size={25} />}
49	{isDesktop && (
50	<div
51	className={styles.input}
52	onClick={() => setModalOpen(true)}
53	>
54	Search anything
55	</div>
56	)}
57	{isDesktop && (
58	<span className={styles.shortcut}>
59	{platform === "darwin" ? "⌘" : "Ctrl +"} K
60	</span>
61	)}
62	</div>
63	{modalOpen && <SearchModal onClose={() => setModalOpen(false)} />}
64	</>
65	);
66	}