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,47 +1,58 @@
-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';
 
 const useStyles = createStyles((theme) => ({
-    content: {
-      padding: rem(30)
-    },
-  
-    title: {
-      fontSize: rem(55),
-      lineHeight: 1.2,
-      fontWeight: 900,
-      paddingBottom: rem(20),
-      [theme.fn.smallerThan('xs')]: {
-        fontSize: rem(28),
-      },
+  content: {
+    padding: rem(30)
+  },
+
+  title: {
+    fontSize: rem(55),
+    lineHeight: 1.2,
+    fontWeight: 900,
+    paddingBottom: rem(20),
+    [theme.fn.smallerThan('xs')]: {
+      fontSize: rem(28),
     },
+  },
 
-    heading2: {
-        color: theme.colorScheme === 'dark' ? theme.white : theme.black,
-        paddingTop: rem(11)
-      }
-  }));
+  heading2: {
+    color: theme.colorScheme === 'dark' ? theme.white : theme.black,
+    paddingTop: rem(11)
+  }
+}));
 
 
 
 
 
 export function Article() {
-    const articleData = useLoaderData();
-    const { classes } = useStyles();
-    const article = articleData.data[0].attributes
-
-    return (
-      <Container className={classes.content}>
-        <Title order={1} className={classes.title}>
-          {article.title}
-        </Title>
-        <Text>
-        <TypographyStylesProvider>
-          <Markdown>{article.content}</Markdown>
-        </TypographyStylesProvider>
-        </Text>
-      </Container>
-    );
+  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>
+      <TypographyStylesProvider>
+        <Markdown>{article.content}</Markdown>
+      </TypographyStylesProvider>
+      {generateCarousel()}
+    </Container>
+  );
+}