diff --git a/frontend/src/component/project/Project/ProjectOverviewChangeRequests.tsx b/frontend/src/component/project/Project/ProjectOverviewChangeRequests.tsx new file mode 100644 index 0000000000..fa6182d6d5 --- /dev/null +++ b/frontend/src/component/project/Project/ProjectOverviewChangeRequests.tsx @@ -0,0 +1,61 @@ +import { Box, styled, Typography } from '@mui/material'; +import { Link } from 'react-router-dom'; +import type { FC } from 'react'; + +export const ChangeRequestContainer = styled(Box)(({ theme }) => ({ + margin: '0', + textAlign: 'center', + backgroundColor: theme.palette.background.paper, + borderRadius: theme.shape.borderRadiusLarge, + width: '100%', + padding: theme.spacing(1, 3.25), + display: 'flex', + alignItems: 'center', + flexWrap: 'wrap', + gap: theme.spacing(2), + fontSize: theme.fontSizes.smallBody, +})); + +const ColorBox = styled(Box)(({ theme }) => ({ + borderRadius: '8px', + padding: theme.spacing(1, 2), + display: 'flex', + gap: theme.spacing(2), + justifyContent: 'space-between', + alignItems: 'center', + whiteSpace: 'nowrap', +})); + +const ApplyBox = styled(ColorBox)(({ theme }) => ({ + background: theme.palette.success.light, +})); + +const ReviewBox = styled(ColorBox)(({ theme }) => ({ + background: theme.palette.secondary.light, +})); + +const ChangeRequestCount = styled(Typography)(({ theme }) => ({ + fontSize: theme.spacing(2), + fontWeight: theme.fontWeight.bold, +})); + +export const ProjectOverviewChangeRequests: FC<{ project: string }> = ({ + project, +}) => { + return ( + + Open change requests + + To be applied + 10 + + + To be reviewed + 20 + + + View change requests + + + ); +};