76 lines
2 KiB
TypeScript
76 lines
2 KiB
TypeScript
import { Chip, SvgIconProps } from "@material-ui/core";
|
|
import ThumbUpIcon from "@material-ui/icons/ThumbUp";
|
|
import RadioButtonUncheckedIcon from "@material-ui/icons/RadioButtonUnchecked";
|
|
import { ThumbDown } from "@material-ui/icons";
|
|
import CloseIcon from "@material-ui/icons/Close";
|
|
import React from "react";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
|
|
export enum CandidatePosition {
|
|
positive,
|
|
neutral,
|
|
negative,
|
|
skipped,
|
|
}
|
|
|
|
export const allPositions = [
|
|
CandidatePosition.positive,
|
|
CandidatePosition.neutral,
|
|
CandidatePosition.negative,
|
|
CandidatePosition.skipped,
|
|
];
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
legend: {
|
|
position: "relative",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "flex-end",
|
|
marginBottom: theme.spacing(2),
|
|
},
|
|
chip: {
|
|
marginLeft: theme.spacing(1),
|
|
},
|
|
}));
|
|
|
|
export const getIconForPosition = (
|
|
position: CandidatePosition,
|
|
props?: SvgIconProps
|
|
): JSX.Element => {
|
|
switch (position) {
|
|
case CandidatePosition.positive:
|
|
return <ThumbUpIcon {...props} />;
|
|
case CandidatePosition.neutral:
|
|
return <RadioButtonUncheckedIcon {...props} />;
|
|
case CandidatePosition.negative:
|
|
return <ThumbDown {...props} />;
|
|
case CandidatePosition.skipped:
|
|
return <CloseIcon {...props} />;
|
|
}
|
|
};
|
|
|
|
export function CandidatePositionLegend(): React.ReactElement {
|
|
const classes = useStyles();
|
|
|
|
const getChip = (position: CandidatePosition, legendText: string) => {
|
|
return (
|
|
<Chip
|
|
label={legendText}
|
|
color="primary"
|
|
icon={getIconForPosition(position, { fontSize: "inherit" })}
|
|
variant="outlined"
|
|
className={classes.chip}
|
|
/>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className={classes.legend}>
|
|
{getChip(CandidatePosition.positive, "Ich bin dafür")}
|
|
{getChip(CandidatePosition.neutral, "Neutral")}
|
|
{getChip(CandidatePosition.negative, "Ich bin dagegen")}
|
|
{getChip(CandidatePosition.skipped, "Frage überspringen")}
|
|
</div>
|
|
);
|
|
}
|