83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
|
import { Box, Input, InputGroup, InputLeftElement, Text, useColorMode, Icon } from "@chakra-ui/core";
|
||
|
|
import IconList from "./IconList";
|
||
|
|
import { useEffect, useRef, useState } from "react";
|
||
|
|
import useSearch from "../lib/search";
|
||
|
|
import { useRouter } from 'next/router';
|
||
|
|
import { useDebounce } from '../lib/useDebounce';
|
||
|
|
import theme from "../lib/theme";
|
||
|
|
import { Search as SearchIcon } from 'lucide-react';
|
||
|
|
|
||
|
|
const IconOverview = ({data}) => {
|
||
|
|
const router = useRouter();
|
||
|
|
const { query } = router.query;
|
||
|
|
const [queryText, setQueryText] = useState(query || '');
|
||
|
|
const debouncedQuery = useDebounce(queryText, 1000);
|
||
|
|
const results = useSearch(data, queryText);
|
||
|
|
const { colorMode } = useColorMode();
|
||
|
|
|
||
|
|
const inputElement = useRef(null);
|
||
|
|
|
||
|
|
function handleKeyDown(event) {
|
||
|
|
if (event.key === "/" && inputElement.current !== document.activeElement) {
|
||
|
|
event.preventDefault();
|
||
|
|
inputElement.current.focus();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setQueryText(query || '');
|
||
|
|
}, [query]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const { query } = router;
|
||
|
|
|
||
|
|
router.push({
|
||
|
|
query: {
|
||
|
|
...query,
|
||
|
|
query: debouncedQuery
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}, [debouncedQuery]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
window.addEventListener('keydown', handleKeyDown);
|
||
|
|
return () => window.removeEventListener('keydown', handleKeyDown);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<InputGroup position="sticky" top={4} zIndex={1} bg={
|
||
|
|
colorMode == "light"
|
||
|
|
? theme.colors.white
|
||
|
|
: theme.colors.gray[700]
|
||
|
|
}>
|
||
|
|
<InputLeftElement children={(<Icon><SearchIcon /></Icon>)} />
|
||
|
|
<Input
|
||
|
|
ref={inputElement}
|
||
|
|
placeholder={`Search ${Object.keys(data).length} icons (Press "/" to focus)`}
|
||
|
|
value={queryText}
|
||
|
|
onChange={(event) => setQueryText(event.target.value)}
|
||
|
|
/>
|
||
|
|
</InputGroup>
|
||
|
|
<Box marginTop={5}>
|
||
|
|
{results.length > 0 ? (
|
||
|
|
|
||
|
|
<IconList icons={results} />
|
||
|
|
|
||
|
|
) : (
|
||
|
|
<Text
|
||
|
|
fontSize="2xl"
|
||
|
|
fontWeight="bold"
|
||
|
|
textAlign="center"
|
||
|
|
style={{ wordBreak: "break-word" }}
|
||
|
|
>
|
||
|
|
No results found for "{query}"
|
||
|
|
</Text>
|
||
|
|
)}
|
||
|
|
</Box>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default IconOverview;
|