Add Create component and Comment button

app/page.js

@@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography'
 import Konstitisyon from '@/components/konstitisyon/index.js'
 import Footer from '@/components/footer.js'
 import Sign from '@/components/session/sign.js'
+import Create from '@/components/konstitisyon/create.js'
 
 const apiUrl = process.env.DIRECTUS_API_URL
 const appTitle = process.env.APP_TITLE
@@ -57,7 +58,10 @@ export default async function Page() {
       <Container maxWidth='sm'>
         <Typography mt={1} component='h1' textAlign='center' variant='h4'>{appTitle.toUpperCase()}</Typography>
         <Sign session={session} />
-        <Konstitisyon titres={titres} articles={articles} />
+        {session && (
+          <Create />
+        )}
+        <Konstitisyon session={session} titres={titres} articles={articles} />
       </Container>
       <Footer />
     </Box>

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>