Create Konstitisyon components
This commit is contained in:
@@ -0,0 +1,22 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import Box from '@mui/material/Box'
|
||||
import Typography from '@mui/material/Typography'
|
||||
|
||||
export default function Article({numero, contenu}) {
|
||||
const formattedContent = contenu.replaceAll('\n', '<br />')
|
||||
|
||||
return (
|
||||
<Box textAlign='justify' p={0.5}>
|
||||
{numero > 0 && (
|
||||
<Typography marginBlock={1} fontWeight='bold'>Article {numero}</Typography>
|
||||
)}
|
||||
|
||||
<Typography dangerouslySetInnerHTML={{__html: formattedContent}} />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
Article.propTypes = {
|
||||
numero: PropTypes.number,
|
||||
contenu: PropTypes.string.isRequired
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import Box from '@mui/material/Box'
|
||||
import Paper from '@mui/material/Paper'
|
||||
import {formatKonstitisyon} from '../../lib/format.js'
|
||||
import Titre from './titre.js'
|
||||
import Article from './article.js'
|
||||
|
||||
export default function Konstitisyon({titres, articles}) {
|
||||
const konstitisyon = formatKonstitisyon(titres, articles)
|
||||
|
||||
return (
|
||||
<Box>
|
||||
{konstitisyon.map(({titreId, titre, articles}) => (
|
||||
<Paper key={titreId} variant='outlined' sx={{p: 1, marginBlock: 2}} p={2} >
|
||||
<Titre titre={titre} />
|
||||
{articles.map(({id, numero, contenu}) => (
|
||||
<Article key={id} numero={numero} contenu={contenu} />
|
||||
))}
|
||||
</Paper>
|
||||
))}
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
Konstitisyon.propTypes = {
|
||||
titres: PropTypes.object.isRequired,
|
||||
articles: PropTypes.object.isRequired
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
import PropTypes from 'prop-types'
|
||||
import Box from '@mui/material/Box'
|
||||
import Typography from '@mui/material/Typography'
|
||||
|
||||
export default function Titre({titre}) {
|
||||
return (
|
||||
<Box p={1} marginBlock={1}>
|
||||
<Typography sx={{textDecoration: 'underline'}} fontWeight='bold'>{titre}</Typography>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
Titre.propTypes = {
|
||||
titre: PropTypes.string.isRequired
|
||||
}
|
||||
Reference in New Issue
Block a user