49 lines
1.3 KiB
JavaScript
49 lines
1.3 KiB
JavaScript
import { css } from '@emotion/react';
|
||
import styled from '@emotion/styled';
|
||
|
||
const StyledStatusBadge = styled.span`
|
||
display: inline-block;
|
||
padding: 0.25rem 0.75rem;
|
||
border-radius: 0.5rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 400;
|
||
line-height: 1rem;
|
||
|
||
${(props) => {
|
||
switch (props.status) {
|
||
case 'IN_PROGRESS':
|
||
return css`
|
||
border: 0.06rem solid var(--Status-Blue2, rgba(190, 219, 255, 1));
|
||
background: var(--Status-BlueLight, rgba(232, 242, 255, 1));
|
||
color: var(--Status-Blue, rgba(21, 93, 252, 1));
|
||
`;
|
||
case 'COMPLETED':
|
||
return css`
|
||
border: 0.06rem solid var(--Status-Green2, rgba(185, 248, 207, 1));
|
||
background: var(--Status-GreenLight, rgba(220, 252, 231, 1));
|
||
color: var(--Status-Green, rgba(1, 102, 48, 1));
|
||
`;
|
||
default:
|
||
return css`
|
||
background-color: #f5f5f5;
|
||
color: #9e9e9e;
|
||
`;
|
||
}
|
||
}}
|
||
`;
|
||
|
||
export const StatusBadge = ({ status }) => {
|
||
const getStatusText = (status) => {
|
||
switch (status) {
|
||
case 'IN_PROGRESS':
|
||
return 'В работе';
|
||
case 'COMPLETED':
|
||
return 'Завершена';
|
||
default:
|
||
return 'В ожидании';
|
||
}
|
||
};
|
||
|
||
return <StyledStatusBadge status={status}>{getStatusText(status)}</StyledStatusBadge>;
|
||
};
|