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	rakinar2	575	"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			}