diff --git a/lib/components/ModeImage.tsx b/lib/components/ModeImage.tsx index 3ee1f4dbf..95f5e794b 100644 --- a/lib/components/ModeImage.tsx +++ b/lib/components/ModeImage.tsx @@ -1,12 +1,28 @@ import Image from "next/image"; +import { CSSProperties } from "react"; interface ModeImageProps { mode: "SZ" | "TC" | "RM" | "CB"; size: 32 | 64 | 128; + onClick?: () => void; + style?: CSSProperties; } -const ModeImage: React.FC = ({ mode, size }) => { - return ; +const ModeImage: React.FC = ({ + mode, + size, + onClick, + style, +}) => { + return ( + + ); }; export default ModeImage; diff --git a/scenes/MapPlanner/components/DraggableImageAdder.tsx b/scenes/MapPlanner/components/DraggableImageAdder.tsx index 692898c2c..6f8bbeaea 100644 --- a/scenes/MapPlanner/components/DraggableImageAdder.tsx +++ b/scenes/MapPlanner/components/DraggableImageAdder.tsx @@ -58,7 +58,7 @@ const DraggableImageAdder: React.FC = ({ } m="3px" > - + ))} {["Blaster", "Brella", "Charger", "Slosher"].map( diff --git a/scenes/MapPlanner/components/StageSelector.tsx b/scenes/MapPlanner/components/StageSelector.tsx index 3d1d8159d..5f5e605cb 100644 --- a/scenes/MapPlanner/components/StageSelector.tsx +++ b/scenes/MapPlanner/components/StageSelector.tsx @@ -82,20 +82,13 @@ const StageSelector: React.FC = ({ ) : ( <> + {/* FIXME: actual radio button component for Top500 page too */} {(["SZ", "TC", "RM", "CB"] as const).map((mode) => ( changeMode(mode)} mode={mode} - w={8} - h={8} - cursor="pointer" - style={{ - filter: - currentBackground.mode === mode - ? undefined - : "grayscale(100%)", - }} + size={32} /> ))}