ORGANISATION-KA-INTERNATIONALE/konstitisyon.nu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create VersionComparison & VersionDialog components

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2024-11-28 07:55:32 +04:00
parent e1048d343b
commit 3134184ece
2 changed files with 191 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/versions/version-comparison.js
+141
View File
@@ -0,0 +1,141 @@
import Box from '@mui/material/Box'
import Typography from '@mui/material/Typography'
import Paper from '@mui/material/Paper'
import Grid from '@mui/material/Grid2'
import PropTypes from 'prop-types'
export default function VersionComparison({versionData}) {
const {current, main, outdated} = versionData
return (
<Box sx={{padding: 3}}>
<Grid container spacing={2}>
<Grid item xs={6}>
<Paper sx={{padding: 2, backgroundColor: '#388E3C'}}>
<Typography variant='body1' sx={{color: '#fff'}}>
{main.contenu}
</Typography>
</Paper>
</Grid>
<Grid item xs={6}>
<Paper sx={{padding: 2, backgroundColor: outdated ? '#D32F2F' : '#1976D2'}}>
<Typography variant='body1' sx={{color: '#fff'}}>
{current.contenu}
</Typography>
</Paper>
</Grid>
</Grid>
<Box sx={{marginTop: 4}}>
<Typography textAlign='center' variant='subtitle1' sx={{fontWeight: 'bold', marginBottom: 1}}>
LÉGENDE
</Typography>
<Grid container spacing={2}>
<Grid item container xs={12} alignItems='center' spacing={2}>
<Grid item>
<Paper
sx={{
padding: 1,
backgroundColor: '#388E3C',
color: '#fff',
width: 100,
textAlign: 'center',
}}
>
<Typography variant='body2'>
<strong>PUBLIÉE</strong>
</Typography>
</Paper>
</Grid>
<Grid item>
<Typography
variant='body2'
sx={{
backgroundColor: '#E8F5E9',
padding: 1,
borderRadius: 1,
color: '#388E3C',
fontWeight: 'bold'
}}
>
Version actuellement en ligne.
</Typography>
</Grid>
</Grid>
<Grid item container xs={12} alignItems='center' spacing={2}>
<Grid item>
<Paper
sx={{
padding: 1,
backgroundColor: '#1976D2',
color: '#fff',
width: 100,
textAlign: 'center'
}}
>
<Typography variant='body2'>
<strong>PROPOSÉE</strong>
</Typography>
</Paper>
</Grid>
<Grid item xs>
<Typography
variant='body2'
sx={{
backgroundColor: '#E3F2FD',
padding: 1,
borderRadius: 1,
color: '#1976D2',
fontWeight: 'bold'
}}
>
Version soumise mais pas encore publiée.
</Typography>
</Grid>
</Grid>
<Grid item container xs={12} alignItems='center' spacing={2}>
<Grid item>
<Paper
sx={{
padding: 1,
backgroundColor: '#D32F2F',
color: '#fff',
width: 100,
textAlign: 'center',
}}
>
<Typography variant='body2'>
<strong>ANCIENNE</strong>
</Typography>
</Paper>
</Grid>
<Grid item>
<Typography
variant='body2'
sx={{
backgroundColor: '#F9E8E8',
padding: 1,
borderRadius: 1,
color: '#D32F2F',
fontWeight: 'bold'
}}
>
Remplacée par une version plus récente publiée.
</Typography>
</Grid>
</Grid>
</Grid>
</Box>
</Box>
)
}
VersionComparison.propTypes = {
versionData: PropTypes.shape({
outdated: PropTypes.bool.isRequired,
mainHash: PropTypes.string.isRequired,
current: PropTypes.object.isRequired,
main: PropTypes.object.isRequired,
}).isRequired,
}