add carousel

package.json

@@ -11,9 +11,11 @@
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
-    "@mantine/core": "^6.0.17",
-    "@mantine/hooks": "^6.0.17",
+    "@mantine/carousel": "^6.0.21",
+    "@mantine/core": "^6.0.21",
+    "@mantine/hooks": "^6.0.21",
     "@tabler/icons-react": "^2.28.0",
+    "embla-carousel-react": "^7.0.0",
     "fuse.js": "^6.6.2",
     "maplibre-gl": "^3.2.0",
     "react": "^18.2.0",

src/Article.tsx

@@ -1,4 +1,5 @@
-import { Title, Text, Container, rem, createStyles, TypographyStylesProvider  } from '@mantine/core';
+import { Title, Container, rem, createStyles, TypographyStylesProvider, Image } from '@mantine/core';
+import { Carousel } from '@mantine/carousel';
 import { useLoaderData } from 'react-router-dom';
 import Markdown from 'react-markdown';
 
@@ -31,17 +32,27 @@ export function Article() {
   const articleData = useLoaderData();
   const { classes } = useStyles();
   const article = articleData.data[0].attributes
+  console.log(articleData)
+
+  const generateCarousel = () => {
+    if (articleData.data[0].attributes.carousel.data) {
+      return (
+        <Carousel slideSize="70%" height={500} slideGap="md" loop>
+          {articleData.data[0].attributes.carousel.data.map(image => <Carousel.Slide><Image fit='fill' height={500} mx="auto" radius="md" src={`http://strapi.wg.gateway.ts${image.attributes.url}`} alt="Random image" /></Carousel.Slide>)}
+        </Carousel>
+      )
+    }
+  }
 
   return (
     <Container className={classes.content}>
       <Title order={1} className={classes.title}>
         {article.title}
       </Title>
-        <Text>
       <TypographyStylesProvider>
         <Markdown>{article.content}</Markdown>
       </TypographyStylesProvider>
-        </Text>
+      {generateCarousel()}
     </Container>
   );
 }