diff --git a/src/components/SearchModal/LabelSearchWithGoogle.tsx b/src/components/SearchModal/LabelSearchWithGoogle.tsx new file mode 100644 index 0000000..7b6886f --- /dev/null +++ b/src/components/SearchModal/LabelSearchWithGoogle.tsx @@ -0,0 +1,15 @@ +import { FcGoogle } from "react-icons/fc"; + +import styles from "./search.module.scss"; + +export default function LabelSearchWithGoogle() { + return ( + + Recherche avec{" "} + + + oogle + + + ); +} diff --git a/src/components/SearchModal/SearchList.tsx b/src/components/SearchModal/SearchList.tsx new file mode 100644 index 0000000..857d780 --- /dev/null +++ b/src/components/SearchModal/SearchList.tsx @@ -0,0 +1,40 @@ +import { ReactNode } from "react"; + +import { SearchItem } from "types"; +import SearchListItem from "./SearchListItem"; + +import styles from "./search.module.scss"; + +export default function SearchList({ + items, + noItem, +}: { + items: SearchItem[]; + noItem?: ReactNode; +}) { + return ( + + ); +} + +function LabelNoItem() { + return Aucun élément trouvé; +} diff --git a/src/components/SearchModal/SearchListItem.tsx b/src/components/SearchModal/SearchListItem.tsx new file mode 100644 index 0000000..cb8d89f --- /dev/null +++ b/src/components/SearchModal/SearchListItem.tsx @@ -0,0 +1,23 @@ +import LinkTag from "next/link"; +import { AiOutlineFolder } from "react-icons/ai"; + +import LinkFavicon from "components/Links/LinkFavicon"; +import { SearchItem } from "types"; + +import styles from "./search.module.scss"; + +export default function SearchListItem({ item }: { item: SearchItem }) { + const { name, type, url } = item; + return ( +
  • + + {type === "link" ? ( + + ) : ( + + )} + {name} + +
    • + ); +} diff --git a/src/components/SearchModal/SearchModal.tsx b/src/components/SearchModal/SearchModal.tsx index eaf1726..a39f004 100644 --- a/src/components/SearchModal/SearchModal.tsx +++ b/src/components/SearchModal/SearchModal.tsx @@ -1,19 +1,19 @@ -import LinkTag from "next/link"; -import { ReactNode, useCallback, useMemo, useState } from "react"; -import { FcGoogle } from "react-icons/fc"; +import { FormEvent, useCallback, useMemo, useState } from "react"; +import { useHotkeys } from "react-hotkeys-hook"; import useAutoFocus from "hooks/useAutoFocus"; -import LinkFavicon from "components/Links/LinkFavicon"; import Modal from "components/Modal/Modal"; import TextBox from "components/TextBox"; +import LabelSearchWithGoogle from "./LabelSearchWithGoogle"; +import SearchList from "./SearchList"; +import * as Keys from "constants/keys"; +import { GOOGLE_SEARCH_URL } from "constants/search-urls"; import { Category, Link, SearchItem } from "types"; import styles from "./search.module.scss"; -const GOOGLE_SEARCH_URL = "https://google.com/search?q="; - export default function SearchModal({ close, handleSelectCategory, @@ -29,7 +29,13 @@ export default function SearchModal({ }) { const autoFocusRef = useAutoFocus(); + // TODO: peristance + const [canSearchLink, setCanSearchLink] = useState(true); + const [canSearchCategory, setCanSearchCategory] = useState(true); + const [search, setSearch] = useState(""); + const [cursor, setCursor] = useState(0); + const canSubmit = useMemo(() => search.length > 0, [search]); const itemsCompletion = useMemo( @@ -44,8 +50,21 @@ export default function SearchModal({ [items, search] ); + useHotkeys(Keys.ARROW_LEFT, () => { + console.log("left"); + }); + + useHotkeys(Keys.ARROW_RIGHT, () => { + console.log("right"); + }); + + const handleSearchInputChange = useCallback((value) => { + setSearch(value); + setCursor(0); + }, []); + const handleSubmit = useCallback( - (event) => { + (event: FormEvent) => { event.preventDefault(); setSearch(""); @@ -72,16 +91,22 @@ export default function SearchModal({ return (
    + setSearch(value)} + onChangeCallback={handleSearchInputChange} value={search} placeholder="Rechercher" innerRef={autoFocusRef} fieldClass={styles["search-input-field"]} /> {search.length === 0 && favorites.length > 0 && ( - ({ id: favorite.id, name: favorite.name, @@ -92,7 +117,7 @@ export default function SearchModal({ /> )} {search.length > 0 && ( - ({ id: item.id, name: item.name, @@ -110,72 +135,48 @@ export default function SearchModal({ ); } -function LabelSearchWithGoogle() { - return ( - - Recherche avec{" "} - - - oogle - - - ); -} - -function LabelNoItem() { - return Aucun élément trouvé; -} - -function ListItemComponent({ - items, - noItem, +function SearchFilter({ + canSearchLink, + setCanSearchLink, + canSearchCategory, + setCanSearchCategory, }: { - items: SearchItem[]; - noItem?: ReactNode; + canSearchLink: boolean; + setCanSearchLink: (value: boolean) => void; + canSearchCategory: boolean; + setCanSearchCategory: (value: boolean) => void; }) { return ( -
      - {items.length > 0 ? ( - items.map((item) => ( - - )) - ) : noItem ? ( - noItem - ) : ( - - )} -
    - ); -} - -function ItemComponent({ item }: { item: SearchItem }) { - const { name, type, url } = item; - return ( -
  • - - {type === "link" ? ( - - ) : ( - category - )} - {name} - -
    • +
    +

    Rechercher

    +
    + setCanSearchLink(target.checked)} + checked={canSearchLink} + /> + +
    +
    + setCanSearchCategory(target.checked)} + checked={canSearchCategory} + /> + +
    +
    ); } diff --git a/src/components/SearchModal/search.module.scss b/src/components/SearchModal/search.module.scss index bdcaf1f..f645ca7 100644 --- a/src/components/SearchModal/search.module.scss +++ b/src/components/SearchModal/search.module.scss @@ -25,7 +25,7 @@ form.search-form { } } -.list-item { +.search-list { margin: 1em 0; display: flex; gap: 1em; @@ -34,9 +34,10 @@ form.search-form { flex-wrap: wrap; } -.item { +.search-item { & > a { display: flex; + align-items: center; flex-direction: column; } } diff --git a/src/constants/keys.ts b/src/constants/keys.ts new file mode 100644 index 0000000..19f2d88 --- /dev/null +++ b/src/constants/keys.ts @@ -0,0 +1,10 @@ +export const OPEN_SEARCH_KEY = "s"; +export const CLOSE_SEARCH_KEY = "escape"; + +export const OPEN_CREATE_LINK_KEY = "l"; +export const OPEN_CREATE_CATEGORY_KEY = "c"; + +export const ARROW_UP = "ArrowUp"; +export const ARROW_DOWN = "ArrowDown"; +export const ARROW_LEFT = "ArrowLeft"; +export const ARROW_RIGHT = "ArrowRight"; diff --git a/src/constants/search-urls.ts b/src/constants/search-urls.ts new file mode 100644 index 0000000..8624af9 --- /dev/null +++ b/src/constants/search-urls.ts @@ -0,0 +1 @@ +export const GOOGLE_SEARCH_URL = "https://google.com/search?q=";