Add Create component and Comment button

components/konstitisyon/index.js

@@ -1,10 +1,27 @@
+'use client'
+
 import PropTypes from 'prop-types'
 import Box from '@mui/material/Box'
 import Paper from '@mui/material/Paper'
+import {styled} from '@mui/material/styles'
+import IconButton from '@mui/material/IconButton'
+import AddCommentIcon from '@mui/icons-material/AddComment'
+import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
 import Titre from './titre.js'
 import Article from './article.js'
 import {formatKonstitisyon} from '@/lib/format.js'
 
+const LightTooltip = styled(({className, ...props}) => (
+  <Tooltip {...props} classes={{popper: className}} />
+))(({theme}) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.common.white,
+    color: 'rgba(0, 0, 0, 0.87)',
+    boxShadow: theme.shadows[1],
+    fontSize: 15,
+  },
+}))
+
 export default function Konstitisyon({session, titres, articles}) {
   const konstitisyon = formatKonstitisyon(titres, articles)
 
@@ -16,6 +33,15 @@ export default function Konstitisyon({session, titres, articles}) {
           {articles.map(({id, numero, contenu}) => (
             <Article key={id} session={session} articleId={id} numero={numero} contenu={contenu} />
           ))}
+          {session && (
+            <Box sx={{textAlign: 'right'}}>
+              <IconButton size='large' aria-label='commenter'>
+                <LightTooltip title='Commenter'>
+                  <AddCommentIcon color='warning' fontSize='inherit' />
+                </LightTooltip>
+              </IconButton>
+            </Box>
+          )}
         </Paper>
       ))}
     </Box>