refactor: Improve edit components

components/konstitisyon/edit/article.js

@@ -0,0 +1,28 @@
+import PropTypes from 'prop-types'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Edit from './index.js'
+
+export default function Article({session, articleId, numero, contenu}) {
+  const formattedContent = contenu.replaceAll('\n', '<br />')
+
+  return (
+    <Box textAlign='justify' p={0.5}>
+      <Box sx={{display: 'flex', alignItems: 'center'}}>
+        <Typography marginBlock={1} fontWeight='bold'>{!numero || numero === 0 ? 'Article ...' : `Article ${numero}`}</Typography>
+        {session && (
+          <Edit session={session} id={articleId} contenu={contenu} collection='articles' />
+        )}
+      </Box>
+
+      <Typography dangerouslySetInnerHTML={{__html: formattedContent}} />
+    </Box>
+  )
+}
+
+Article.propTypes = {
+  session: PropTypes.object,
+  articleId: PropTypes.string.isRequired,
+  numero: PropTypes.number,
+  contenu: PropTypes.string.isRequired
+}