import { useNoteStore } from "@/state/Stores"; import { observer } from "mobx-react-lite"; import { useTranslations } from "next-intl"; import { useRouter, useSearchParams } from "next/navigation"; import { EraserFill, 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"; import { useIntParam } from "taehui-ts/fe-utilities"; export default observer(() => { const { wantInput, setWantInput } = useNoteStore(); const { push } = useRouter(); const searchParams = useSearchParams(); const onWant = () => { push(`/note/${wantInput}?${new URLSearchParams(searchParams)}`); }; const { param: fit, setParam: setFit } = useIntParam("fit", 0); const { param: src, setParam: setSrc } = useIntParam("src", 0); const t = useTranslations(); return ( <InputGroup> <Dropdown onSelect={(eventKey) => { if (eventKey) { setFit(Number.parseInt(eventKey)); } }} > <DropdownToggle>{t(`fit${fit}`)}</DropdownToggle> <DropdownMenu> <DropdownItem eventKey="0">{t("fit0")}</DropdownItem> <DropdownItem eventKey="1">{t("fit1")}</DropdownItem> <DropdownItem eventKey="2">{t("fit2")}</DropdownItem> <DropdownItem eventKey="3">{t("fit3")}</DropdownItem> <DropdownItem eventKey="4">{t("fit4")}</DropdownItem> <DropdownItem eventKey="5">{t("fit5")}</DropdownItem> <DropdownItem eventKey="6">{t("fit6")}</DropdownItem> </DropdownMenu> </Dropdown> <Dropdown onSelect={(eventKey) => { if (eventKey) { setSrc(Number.parseInt(eventKey)); } }} > <DropdownToggle>{t(`src${src}`)}</DropdownToggle> <DropdownMenu> <DropdownItem eventKey="0">{t("src0")}</DropdownItem> <DropdownItem eventKey="1">{t("src1")}</DropdownItem> <DropdownItem eventKey="2">{t("src2")}</DropdownItem> <DropdownItem eventKey="3">{t("src3")}</DropdownItem> </DropdownMenu> </Dropdown> <FormControl type="search" value={wantInput} onChange={({ target: { value } }) => { setWantInput(value); }} onKeyDown={({ key }) => { if (key === "Enter") { onWant(); } }} /> <Button variant="success" onClick={onWant}> <Search /> </Button> <Button variant="danger" onClick={() => { push("/note"); }} > <EraserFill /> </Button> </InputGroup> ); });