80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
import { Check, Square, X } from "@styled-icons/boxicons-regular";
|
|
import styled, { css } from "styled-components";
|
|
|
|
type State = "Allow" | "Neutral" | "Deny";
|
|
|
|
const SwitchContainer = styled.div.attrs({
|
|
role: "radiogroup",
|
|
"aria-orientiation": "horizontal",
|
|
})`
|
|
flex-shrink: 0;
|
|
|
|
display: flex;
|
|
margin: 4px 16px;
|
|
overflow: hidden;
|
|
border-radius: var(--border-radius);
|
|
background: var(--secondary-background);
|
|
border: 2px solid var(--tertiary-background);
|
|
`;
|
|
|
|
const Switch = styled.div.attrs({
|
|
role: "radio",
|
|
})<{ state: State; selected: boolean }>`
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
transition: 0.2s ease all;
|
|
|
|
color: ${(props) =>
|
|
props.state === "Allow"
|
|
? "var(--success)"
|
|
: props.state === "Deny"
|
|
? "var(--error)"
|
|
: "var(--tertiary-foreground)"};
|
|
|
|
${(props) =>
|
|
props.selected &&
|
|
css`
|
|
color: white;
|
|
|
|
background: ${props.state === "Allow"
|
|
? "var(--success)"
|
|
: props.state === "Deny"
|
|
? "var(--error)"
|
|
: "var(--primary-background)"};
|
|
`}
|
|
|
|
&:hover {
|
|
filter: brightness(0.8);
|
|
}
|
|
`;
|
|
|
|
interface Props {
|
|
state: State;
|
|
onChange: (state: State) => void;
|
|
}
|
|
|
|
export function OverrideSwitch({ state, onChange }: Props) {
|
|
return (
|
|
<SwitchContainer>
|
|
<Switch
|
|
onClick={() => onChange("Deny")}
|
|
state="Deny"
|
|
selected={state === "Deny"}>
|
|
<X size={24} />
|
|
</Switch>
|
|
<Switch
|
|
onClick={() => onChange("Neutral")}
|
|
state="Neutral"
|
|
selected={state === "Neutral"}>
|
|
<Square size={24} />
|
|
</Switch>
|
|
<Switch
|
|
onClick={() => onChange("Allow")}
|
|
state="Allow"
|
|
selected={state === "Allow"}>
|
|
<Check size={24} />
|
|
</Switch>
|
|
</SwitchContainer>
|
|
);
|
|
}
|