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,
}
components/versions/version-dialog.js
+50
View File
@@ -0,0 +1,50 @@
import PropTypes from 'prop-types'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogTitle from '@mui/material/DialogTitle'
import useMediaQuery from '@mui/material/useMediaQuery'
import {useTheme} from '@mui/material/styles'
import VersionComparison from './version-comparison.js'
export default function VersionDialog({versionData, isOpen, setIsOpen}) {
const theme = useTheme()
const fullScreen = useMediaQuery(theme.breakpoints.down('md'))
const handleClose = () => {
setIsOpen(false)
}
return (
<Dialog
fullScreen={fullScreen}
open={isOpen}
aria-labelledby='comparaison-des-versions'
onClose={handleClose}
>
<DialogTitle textAlign='center' id='comparaison-des-versions'>
{'Comparaison des versions'}
</DialogTitle>
<DialogContent>
<VersionComparison versionData={versionData} />
</DialogContent>
<DialogActions>
<Button autoFocus color='success' onClick={handleClose}>
Fermer
</Button>
</DialogActions>
</Dialog>
)
}
VersionDialog.propTypes = {
versionData: PropTypes.shape({
outdated: PropTypes.bool.isRequired,
mainHash: PropTypes.string.isRequired,
current: PropTypes.object.isRequired,
main: PropTypes.object.isRequired
}).isRequired,
isOpen: PropTypes.bool.isRequired,
setIsOpen: PropTypes.func.isRequired
}