26 lines
835 B
TypeScript
26 lines
835 B
TypeScript
import type { Mode } from "./Room";
|
|
|
|
export function ModeToggle({ mode, onChange }: { mode: Mode; onChange: (m: Mode) => void }) {
|
|
const seg = (m: Mode): React.CSSProperties => ({
|
|
flex: 1,
|
|
height: 30,
|
|
border: "none",
|
|
borderRadius: 6,
|
|
cursor: "pointer",
|
|
font: "600 13px system-ui, sans-serif",
|
|
background: mode === m ? "#fff" : "transparent",
|
|
color: mode === m ? "#222" : "#666",
|
|
boxShadow: mode === m ? "0 1px 3px rgba(0,0,0,0.15)" : "none",
|
|
});
|
|
return (
|
|
<div style={{ gridColumn: "1 / -1", display: "flex", gap: 2, padding: 3, background: "#d9d9d9", borderRadius: 9 }}>
|
|
<button style={seg("layout")} onClick={() => onChange("layout")}>
|
|
Layout
|
|
</button>
|
|
<button style={seg("room")} onClick={() => onChange("room")}>
|
|
Room
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|