/[sudobot]/trunk/docs/components/Searching/Search.tsx
ViewVC logotype

Diff of /trunk/docs/components/Searching/Search.tsx

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 575 by rakinar2, Mon Jul 29 17:59:26 2024 UTC revision 626 by rakinar2, Sat Sep 7 09:38:45 2024 UTC
# Line 2  Line 2 
2    
3  import useIsDesktop from "@/hooks/useIsDesktop";  import useIsDesktop from "@/hooks/useIsDesktop";
4  import usePlatform from "@/hooks/usePlatform";  import usePlatform from "@/hooks/usePlatform";
 import styles from "@/styles/Search.module.css";  
5  import { Button } from "@mui/material";  import { Button } from "@mui/material";
6  import { useEffect, useState } from "react";  import { useEffect, useRef, useState } from "react";
7  import { MdSearch } from "react-icons/md";  import { MdSearch } from "react-icons/md";
8  import SearchModal from "./SearchModal";  import SearchInput from "./SearchInput";
9    import SearchResults from "./SearchResults";
10    
11  export default function Search() {  export default function Search() {
12      const platform = usePlatform();      const platform = usePlatform();
13      const isDesktop = useIsDesktop();      const isDesktop = useIsDesktop();
14      const [modalOpen, setModalOpen] = useState(false);      const ref = useRef<HTMLInputElement>(null);
15        const [query, setQuery] = useState<string | null>(null);
16        const [toggled, setToggled] = useState(false);
17    
18      useEffect(() => {      useEffect(() => {
19          const callback = (event: KeyboardEvent) => {          const callback = (event: KeyboardEvent) => {
# Line 21  export default function Search() { Line 23  export default function Search() {
23                      event.code === "KeyK")                      event.code === "KeyK")
24              ) {              ) {
25                  event.preventDefault();                  event.preventDefault();
26                  setTimeout(() => setModalOpen(true), 120);                  ref.current?.focus();
             } else if (event.code === "Escape" && modalOpen) {  
                 event.preventDefault();  
                 setModalOpen(false);  
27              }              }
28          };          };
29    
30          window.addEventListener("keydown", callback);          window.addEventListener("keydown", callback);
31    
32          return () => window.removeEventListener("keydown", callback);          return () => window.removeEventListener("keydown", callback);
33      }, [modalOpen]);      }, [platform]);
34    
35      return (      return (
36          <>          <>
37              <div className={styles.root}>              <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                  {!isDesktop && (                  {!isDesktop && (
48                      <Button                      <Button
49                          style={{ minWidth: 0, color: "#fff" }}                          className="min-w-0 text-white"
50                          className="text-white"                          onClick={() => {
51                          onClick={() => setModalOpen(true)}                              setToggled(true);
52                            }}
53                      >                      >
54                          <MdSearch size={23} style={{ color: "white" }} />                          <MdSearch size={23} />
55                      </Button>                      </Button>
56                  )}                  )}
57                  {isDesktop && <MdSearch size={25} />}  
58                  {isDesktop && (                  {!isDesktop && toggled && (
59                      <div                      <div
60                          className={styles.input}                          className="fixed top-0 left-0 w-screen h-screen bg-black/30 z-[100000005]"
61                          onClick={() => setModalOpen(true)}                          onClick={() => setToggled(false)}
62                      >                      >
63                          Search anything                          <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                      </div>                      </div>
77                  )}                  )}
                 {isDesktop && (  
                     <span className={styles.shortcut}>  
                         {platform === "darwin" ? "⌘" : "Ctrl +"} K  
                     </span>  
                 )}  
78              </div>              </div>
             {modalOpen && <SearchModal onClose={() => setModalOpen(false)} />}  
79          </>          </>
80      );      );
81  }  }
Legend:
Removed from v.575  
changed lines
  Added in v.626
[email protected]
 ViewVC Help
Powered by ViewVC 1.1.26