Create Stats components

components/stats/kat-stats.js

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import Card from '@mui/material/Card'
+import CardContent from '@mui/material/CardContent'
+import Typography from '@mui/material/Typography'
+import TraductionsStats from './traductions-stats'
+
+export default function KatStats({emoji, value, total}) {
+  return (
+    <Card sx={{marginBottom: 2}} variant='outlined'>
+      <CardContent>
+        <Typography gutterBottom align='center' variant='h6'>
+          <span dangerouslySetInnerHTML={{__html: emoji}} />
+        </Typography>
+        <TraductionsStats value={value} total={total} />
+      </CardContent>
+    </Card>
+  )
+}
+
+KatStats.propTypes = {
+  emoji: PropTypes.string.isRequired,
+  value: PropTypes.number.isRequired,
+  total: PropTypes.number.isRequired
+}