import { useWantStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { useRouter } from "next/navigation"; import { ChangeEventHandler, KeyboardEventHandler } from "react"; import { Search } from "react-bootstrap-icons"; import Button from "react-bootstrap/Button"; import Dropdown from "react-bootstrap/Dropdown"; import DropdownItem from "react-bootstrap/DropdownItem"; import DropdownMenu from "react-bootstrap/DropdownMenu"; import DropdownToggle from "react-bootstrap/DropdownToggle"; import FormControl from "react-bootstrap/FormControl"; import InputGroup from "react-bootstrap/InputGroup"; export default observer(() => { const { textInput, setTextInput, wantVariety, setWantVariety } = useWantStore(); const t = useTranslations(); const { push } = useRouter(); const onWant = () => { if (textInput) { push(`/want/${wantVariety}/${textInput}`); } }; const onWantInput: ChangeEventHandler<HTMLInputElement> = ({ target: { value }, }) => { setTextInput(value); }; const onInputLower: KeyboardEventHandler<HTMLInputElement> = ({ key }) => { if (key === "Enter") { onWant(); } }; return ( <InputGroup> <Dropdown onSelect={(eventKey) => { if (eventKey) { setWantVariety(eventKey); } }} > <DropdownToggle>{t(wantVariety)}</DropdownToggle> <DropdownMenu> <DropdownItem eventKey="essay">{t("essay")}</DropdownItem> <DropdownItem eventKey="comment">{t("comment")}</DropdownItem> </DropdownMenu> </Dropdown> <FormControl type="search" value={textInput} onChange={onWantInput} onKeyDown={onInputLower} /> <Button variant="success" onClick={onWant}> <Search /> </Button> </InputGroup> ); });