Init next.js port

2021-12-07 22:38:31 -05:00
parent 6fde6b4f15
commit 2db4c28590
38 changed files with 18522 additions and 2 deletions
@@ -0,0 +1,94 @@
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react';
+import Fuzzy from './_fuzzy';
+import pages from '../public/pages.json';
+import style from '../styles/fuzzy.module.css';
+
+function FuzzyBar(): JSX.Element {
+    const searchField = useRef<any>(null);
+    const [searchValue, setSearchValue] = useState('');
+    const [resultsValue, setResultsValue] = useState(<></>);
+    let [metaKey, setMetaKey] = useState('Ctrl');
+
+    const [show, setShow] = useState(false);
+
+    let fuzz: Fuzzy | null = null;
+
+    try {
+        fuzz = new Fuzzy({
+            pages: pages,
+            searchField: searchField,
+            searchValue: searchValue,
+            resultsValue: resultsValue,
+            setResultsValue: setResultsValue,
+            maxResults: 5
+        });
+    } catch (e: any) {
+        console.error(e.message);
+    }
+
+    function searchInput(e: ChangeEvent<HTMLInputElement>) {
+        setSearchValue(e.target.value);
+    }
+
+    const toggleSearch = useCallback(() => {
+        setShow(!show);
+        fuzz?.showSearchResults();
+        searchField.current?.focus();
+    }, [fuzz, show]);
+
+    useEffect(() => {
+        if (window.navigator.userAgent.match(/mac[\s]?os/i))
+            setMetaKey('⌘ Cmd');
+    }, []);
+
+    useEffect(() => {
+        const event = (e: KeyboardEvent) => {
+            if (e.code === 'KeyK' && (e.ctrlKey || e.metaKey)) {
+                toggleSearch();
+            }
+
+            if (e.code === 'KeyP' && (e.ctrlKey || e.metaKey) && e.shiftKey) {
+                alert('not really sure what to do here lol');
+            }
+
+            if (show)
+                searchField.current?.focus();
+        }
+
+        window.addEventListener('keydown', event);
+
+        return () => { window.removeEventListener('keydown', event); }
+    }, [fuzz, show, toggleSearch]);
+
+
+    return (
+        <>
+            {
+                show ?
+                    <div className={`fuzzynav ${style.container}`}>
+                        <input type='text'
+                            className={style.search}
+                            value={searchValue}
+                            placeholder='Go to ...'
+                            ref={searchField}
+                            onChange={searchInput}
+                            onKeyUp={(e) => { fuzz?.searchKeyUpListener(e) }} />
+                        <div
+                            id='results'
+                            className={style.results}>{resultsValue}</div>
+                    </div>
+                    : <></>
+            }
+
+
+            <a className={style.searchBar} onClick={toggleSearch}>
+                <span className={style.searchTerm}>Search</span>
+                <div className={style.keybind}>
+                    <span className={style.key}>{metaKey}</span> <span className={style.key}>K</span>
+                </div>
+            </a>
+        </>
+    );
+}
+
+export default FuzzyBar;