Something went wrong. Try again.
Starship Simulator Controls thoriumsim.com
Something went wrong. Try again.
1.7 kB · 63 lines
TSX
at develop
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import { q } from "@thorium/context/AppContext";import { cn } from "@thorium/utils/cn";
export function Objective({ id, state, crewComplete, title, description, size,}: { id: number; state: "cancelled" | "complete" | "active"; crewComplete: boolean; title: string; description?: string; size?: "sm";}) { return ( <div key={id} className={cn("flex items-start gap-2", { "text-white/70": state === "cancelled" || state === "complete", })} > <button type="button" className={cn( "mt-1 cursor-default flex items-center justify-center aspect-square @[14rem]:w-4 @[14rem]:h-4 @2xl:w-10 @2xl:h-10 rounded-full border border-white", { "border-red-500 border-2": state === "cancelled", "relative after:block after:absolute after:inset-1 after:bg-white/40 after:hover:bg-white/60 cursor-pointer after:rounded-full": crewComplete, "border-green-500 border-2 after:hidden": state === "complete", }, )} onClick={ crewComplete && state !== "cancelled" ? () => q.objectives.setState.netSend({ objectiveId: id, state: state === "active" ? "complete" : "active", }) : () => null } > {state === "complete" ? ( <div className="aspect-square w-6 rounded-full bg-green-500 @2xl:w-8" /> ) : null} </button> <div className="flex-1"> <h3 className={cn("text-base font-medium @2xl:text-lg @2xl:font-bold", { "line-through": state === "cancelled", })} > {title} </h3> {size === "sm" ? null : <p className="text-sm @2xl:text-base">{description}</p>} </div> </div> );}