Spaces:
Running
Running
File size: 3,464 Bytes
9cd6ddb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
import { useRef, useState } from "react";
import { ChevronDownIcon, SearchIcon } from "@heroicons/react/solid";
import classNames from "classnames";
import { useClickAway, useUpdateEffect } from "react-use";
import { Dropdown } from "components/search/comps/dropdown";
import { useSearch } from "./hooks/useSearch";
import { useIntl } from "react-intl";
export const Search = ({
search,
setSearch,
}: {
search: string;
setSearch: (t: string) => void;
}) => {
const intl = useIntl();
const [dropdownSearch, setDropdownSearch] = useState("");
const [dropdown, setDropdown] = useState(false);
const [tags, setTags] = useState<string[]>([]);
const dropdownRef = useRef(null);
const inputRef = useRef<HTMLInputElement>(null);
useSearch(search, tags);
useClickAway(dropdownRef, () => setDropdown(false));
const handleSelect = (tag: string) => {
if (tags.includes(tag)) {
setTags(tags.filter((t) => t !== tag));
} else {
setTags([...tags, tag]);
}
};
useUpdateEffect(() => {
if (dropdown) {
inputRef?.current?.focus();
}
}, [dropdown]);
return (
<div className="w-full mx-auto z-1 relative">
<div className="bg-dark-600 grid grid-cols-1 lg:grid-cols-5 rounded-lg">
<div className="flex justify-start items-center pl-4 gap-2 lg:col-span-3">
<SearchIcon className="w-5 text-white" />
<input
value={search}
type="text"
className="w-full outline-none pr-3 py-3 bg-transparent text-white placeholder:text-dark-200 text-sm"
placeholder={intl.formatMessage({
id: "iconsEditor.editor.listIcons.search",
})}
onChange={({ target }) => setSearch(target.value)}
/>
</div>
<div
ref={dropdownRef}
className="lg:col-span-2 py-3 lg:py-0 border-t relative cursor-pointer lg:border-l border-dark-300 border-opacity-30 px-4 flex gap-2 justify-between text-sm text-dark-200 tracking-wide font-medium items-center"
onClick={() => setDropdown(true)}
>
<div className="flex items-center justify-between lg:justify-start w-full lg:w-auto gap-2 whitespace-nowrap">
{dropdown ? (
<input
ref={inputRef}
value={dropdownSearch}
placeholder={intl.formatMessage({
id: "iconsEditor.editor.listIcons.category",
})}
className="flex-1 outline-none border-none bg-transparent text-white"
onChange={({ target }) => setDropdownSearch(target.value)}
/>
) : (
<p>
{intl.formatMessage({
id: "iconsEditor.editor.listIcons.category",
})}
</p>
)}
<div className="w-5 h-5 min-w-[1.25rem] bg-darkGreen font-semibold rounded-full flex justify-center items-center text-white text-xs">
{tags.length}
</div>
</div>
<ChevronDownIcon
className={classNames(
"w-5 min-w-[1.25rem] text-dark-100 transition-all ease-in-out duration-200",
{ "rotate-180": dropdown }
)}
/>
<Dropdown
open={dropdown}
search={dropdownSearch}
tags={tags}
onSelect={handleSelect}
/>
</div>
</div>
</div>
);
};
|