EmissionsViewSelect.tsx

import { Paper, ToggleButton, ToggleButtonGroup } from "@mui/material";
import { useStore } from "@nanostores/react";
import { atom } from "nanostores";

export type EmissionsView = "Market-Based" | "Location-Based";
const EMISSIONS_VIEWS: Array<EmissionsView> = [
	"Market-Based",
	"Location-Based",
] as const;
export const selectedEmissionsView = atom<EmissionsView>(EMISSIONS_VIEWS[0]);

export default function EmissionsViewSelect() {
	const $selectedEmissionsView = useStore(selectedEmissionsView);
	return (
		<Paper
			elevation={0}
			variant="outlined"
			sx={{
				display: "inline-block",
			}}
		>
			<ToggleButtonGroup
				value={$selectedEmissionsView}
				exclusive
				onChange={(e, value) => {
					selectedEmissionsView.set(value);
				}}
				aria-label="emissions view toggle button"
				sx={{
					"& .MuiToggleButtonGroup-grouped": {
						margin: "calc(var(--mui-spacing) * .5)",
						border: 0,
						borderRadius: "calc(var(--mui-shape-borderRadius) - 2px)",
					},
					"& .MuiToggleButtonGroup-lastButton": {
						marginLeft: 0,
					},
				}}
				size="small"
			>
				<ToggleButton value="Market-Based">Market-Based</ToggleButton>
				<ToggleButton value="Location-Based">Location-Based</ToggleButton>
			</ToggleButtonGroup>
		</Paper>
	);
}