Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
1.8 kB · 68 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869import { q } from "@thorium/context/AppContext";import { useStation } from "@thorium/routes/station/useStation";import { Icon } from "@thorium/ui/Icon";import SearchableInput, { DefaultResultLabel } from "@thorium/ui/SearchableInput";
import { useShipMapStore } from "./useShipMapStore";
export function CargoSearchInput() { const { shipId } = useStation();
return ( <SearchableInput<{ id: number; name: string; count?: number; type: "deck" | "room" | "inventory"; room?: string; deck: string; deckIndex: number; roomId?: number; }> className="cargo-search" queryKey="cargo" placeholder="Search for rooms, cargo, and systems" getOptions={async ({ queryKey, signal }) => { const result = await q.cargoControl.search.netRequest( { query: queryKey[1], shipId }, { signal }, ); return result; }} ResultLabel={({ active, result, selected }) => ( <DefaultResultLabel active={active} selected={selected}> <div className="flex gap-2"> <Icon className="size-6" name={ result.type === "deck" ? "cuboid" : result.type === "room" ? "warehouse" : "package-open" } /> <div> <p> {result.name} {result.count ? ` (${result.count})` : ""} </p> {result.type !== "deck" && ( <p> <small>{[result.room, result.deck].filter(Boolean).join(", ")}</small> </p> )} </div> </div> </DefaultResultLabel> )} setSelected={(value) => { if (!value) return; const { deckIndex, roomId } = value; useShipMapStore.setState({ deckIndex }); useShipMapStore.setState({ selectedRoomId: roomId || null }); }} displayValue={(item) => item?.name || ""} /> );}