Create Akey components

components/akey/index.js

@@ -0,0 +1,51 @@
+import PropTypes from 'prop-types'
+import Container from '@mui/material/Container'
+import Typography from '@mui/material/Typography'
+import Box from '@mui/material/Box'
+import Grid from '@mui/material/Unstable_Grid2'
+import Button from '@mui/material/Button'
+import Image from 'next/image'
+import Link from 'next/link'
+
+export default function Akey({logo}) {
+  return (
+    <Box sx={{flexGrow: 1, marginBottom: 3, marginTop: 3}}>
+      <Container align='center'>
+        <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+
+          <Typography sx={{fontWeight: 'bold', mr: 1}} variant='h6' component='h1'>
+            OKI
+          </Typography>
+
+          <Image
+            width={32}
+            height={32}
+            alt='OKI logo'
+            src={logo}
+          />
+        </Box>
+        <Typography sx={{fontWeight: 'bold'}} variant='h6' component='h2'>
+          Organisation KA Internationale
+        </Typography>
+        <Typography sx={{fontStyle: 'italic'}} variant='caption' component='h3'>
+          Paroles et traductions
+        </Typography>
+      </Container>
+      <Container sx={{marginTop: 2}}>
+        <Grid container justifyContent='center' spacing={2}>
+          <Grid>
+            <Link passHref href='/pwopose'>
+              <Button color='primary' variant='outlined'>
+                <strong>Proposer des paroles</strong>
+              </Button>
+            </Link>
+          </Grid>
+        </Grid>
+      </Container>
+    </Box>
+  )
+}
+
+Akey.propTypes = {
+  logo: PropTypes.object.isRequired
+}

components/akey/statistik.js

@@ -0,0 +1,17 @@
+import PropTypes from 'prop-types'
+
+import Grid from '@mui/material/Unstable_Grid2'
+import KatAkey from './kat-akey'
+
+export default function Statistik({statistik}) {
+  return (
+    <Grid container spacing={2} sx={{marginBottom: 3}}>
+      <KatAkey tit='Paroles' kantite={statistik.countParole} href='/paroles' as='/paroles' />
+      <KatAkey tit='Artistes' kantite={statistik.countArtiste} href='/awtis?paj&paj=1' as='/awtis/paj/1' />
+    </Grid>
+  )
+}
+
+Statistik.propTypes = {
+  statistik: PropTypes.object.isRequired
+}