54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { getSubmissionStatus, SubmissionState, SubmissionStatus } from "@/state/reducer/submission";
|
|
import { Button, ButtonProps, Theme } from "@material-ui/core";
|
|
import { createStyles, makeStyles } from "@material-ui/core/styles";
|
|
import { useTranslation } from "react-i18next";
|
|
import React from "react";
|
|
import { CommentQuestion } from "mdi-material-ui/index";
|
|
|
|
export const getColorByStatus = (status: SubmissionStatus, theme: Theme) => {
|
|
switch (status) {
|
|
case "awaiting":
|
|
return theme.palette.info.dark;
|
|
case "accepted":
|
|
return theme.palette.success.dark;
|
|
case "declined":
|
|
return theme.palette.error.dark;
|
|
case "draft":
|
|
return theme.palette.grey["800"];
|
|
default:
|
|
return "textPrimary";
|
|
}
|
|
}
|
|
|
|
export const useStatusStyles = makeStyles((theme: Theme) => {
|
|
const colorByStatusGetter = ({ status }: any) => getColorByStatus(status, theme);
|
|
|
|
return createStyles({
|
|
foreground: {
|
|
color: colorByStatusGetter
|
|
},
|
|
background: {
|
|
backgroundColor: colorByStatusGetter
|
|
}
|
|
})
|
|
})
|
|
|
|
export type SubmissionStatusProps = {
|
|
submission: SubmissionState,
|
|
}
|
|
|
|
export const Status = ({ submission } : SubmissionStatusProps) => {
|
|
const status = getSubmissionStatus(submission);
|
|
const classes = useStatusStyles({ status });
|
|
|
|
const { t } = useTranslation();
|
|
|
|
return <span className={ classes.foreground }>{ t(`submission.status.${ status }`) }</span>;
|
|
}
|
|
|
|
export const ContactAction = (props: ButtonProps) => {
|
|
const { t } = useTranslation();
|
|
|
|
return <Button startIcon={ <CommentQuestion/> } variant="outlined" color="primary" { ...props }>{ t('contact') }</Button>
|
|
}
|