From a13bc564a975b7c5fe9989ddc36a3b9d3dfd1df7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20FAMIBELLE-PRONZOLA?= <c.pronzola@tuta.io>
Date: Sat, 18 May 2024 09:36:44 +0400
Subject: [PATCH] Create Konstitisyon components

---
 components/konstitisyon/article.js | 22 ++++++++++++++++++++++
 components/konstitisyon/index.js   | 28 ++++++++++++++++++++++++++++
 components/konstitisyon/titre.js   | 15 +++++++++++++++
 3 files changed, 65 insertions(+)
 create mode 100644 components/konstitisyon/article.js
 create mode 100644 components/konstitisyon/index.js
 create mode 100644 components/konstitisyon/titre.js

diff --git a/components/konstitisyon/article.js b/components/konstitisyon/article.js
new file mode 100644
index 0000000..b03995f
--- /dev/null
+++ b/components/konstitisyon/article.js
@@ -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
+}
diff --git a/components/konstitisyon/index.js b/components/konstitisyon/index.js
new file mode 100644
index 0000000..3c731da
--- /dev/null
+++ b/components/konstitisyon/index.js
@@ -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
+}
diff --git a/components/konstitisyon/titre.js b/components/konstitisyon/titre.js
new file mode 100644
index 0000000..a3e9fb0
--- /dev/null
+++ b/components/konstitisyon/titre.js
@@ -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
+}