Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
1.9 kB · 53 lines
TSX
at develop
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354import { lrmStateMap } from "@thorium/cards/LongRangeComm/shared";import { q } from "@thorium/context/AppContext";import { useStation } from "@thorium/routes/station/useStation";import InfoTip from "@thorium/ui/InfoTip";import { cn } from "@thorium/utils/cn";import { useState } from "react";
export function SentPage() { const { shipId } = useStation(); const [outgoingMessages] = q.longRangeComm.outgoingMessages.useNetRequest({ filter: "sent", shipId, }); const [selectedMessageId, setSelectedMessageId] = useState<number | null>(null); const selectedMessage = outgoingMessages.find((o) => o.id === selectedMessageId); return ( <div className="grid h-full w-full grid-cols-[16rem_1fr] gap-8"> <div className="flex h-full flex-col"> <h3>Sent Messages</h3> <ul className="panel flex-auto"> {outgoingMessages.map((o) => ( <li key={o.id} className={cn("list-group-item cursor-pointer", { selected: selectedMessageId === o.id, })} onClick={() => setSelectedMessageId(o.id)} > To: {o.destinationShipName} <small className="block">From: {o.senderStation}</small> </li> ))} </ul> </div> {selectedMessage ? ( <div className="grid grid-cols-[auto_1fr] grid-rows-[auto_auto_auto_1fr] gap-x-2 gap-y-4"> <p className="text-xl">To:</p> <p className="text-xl">{selectedMessage.destinationShipName}</p> <p className="text-xl">From:</p> <p className="text-xl">{selectedMessage.senderStation}</p> <p className="text-xl">State:</p> <p className="text-xl"> {lrmStateMap[selectedMessage.state]} {selectedMessage.state === "undelivered" ? ( <InfoTip>{selectedMessage.failureReason}</InfoTip> ) : null} </p> <p className="panel col-span-2 p-4">{selectedMessage.message}</p> </div> ) : null} </div> );}