use new carrusel

packages/app/src/components/PostCard/index.jsx

@@ -111,6 +111,24 @@ function PostHeader(props) {
 const PostContent = React.memo((props) => {
     let { message, additions } = props.data
 
+    let carruselRef = React.useRef(null)
+
+    const onClickController = (direction) => {
+        if (carruselRef.current) {
+            switch (direction) {
+                case "left": {
+                    return carruselRef.current.prev()
+                }
+                case "right": {
+                    return carruselRef.current.next()
+                }
+                default: {
+                    return null
+                }
+            }
+        }
+    }
+
     // first filter if is an string
     additions = additions.filter(file => typeof file === "string")
 
@@ -173,7 +191,7 @@ const PostContent = React.memo((props) => {
             key={index}
         >
             <div className="addition">
-                <React.Suspense fallback={<div>Loading</div>} >
+                <React.Suspense ref={carruselRef} fallback={<div>Loading</div>} >
                     <MediaRender />
                 </React.Suspense>
             </div>
@@ -205,22 +223,15 @@ const PostContent = React.memo((props) => {
 
         {additions.length > 0 &&
             <div className="additions">
-                <Swiper
+                <antd.Carousel
-                    //direction="vertical"
+                    ref={carruselRef}
-                    indicatorProps={{
+                    arrows={true}
-                        style: {
+                    nextArrow={<Icons.ArrowRight />}
-                            "--dot-color": "rgba(0, 0, 0, 0.4)",
+                    prevArrow={<Icons.ArrowLeft />}
-                            "--active-dot-color": "var(--primaryColor)",
+                    autoplay
-                            "--dot-size": "10px",
-                            "--active-dot-size": "30px",
-                            "--dot-border-radius": "50%",
-                            "--active-dot-border-radius": "15px",
-                            "--dot-spacing": "8px",
-                        }
-                    }}
                 >
                     {additions}
-                </Swiper>
+                </antd.Carousel>
             </div>
         }
     </div>

packages/app/src/components/PostCard/index.less

@@ -128,12 +128,12 @@
             flex-direction: column;
             align-items: flex-start;
 
-            //background-color: var(--background-color-primary);
+            //background-color: rgba(var(--background-color-primary));
 
             padding: 0 10px 10px 10px;
             border-radius: 8px;
 
-            color: var(--background-color-contrast);
+            color: rgba(var(--background-color-contrast));
 
             overflow: hidden;
 
@@ -148,6 +148,72 @@
                 width: 100%;
                 height: 28vh;
 
+                .slick-slider {
+                    .slick-prev {
+                        display: inline !important;
+                        color: rgba(var(--background-color-contrast), 0.5);
+
+                        z-index: 100;
+
+                        top: 0;
+                        left: 0;
+
+                        height: 100%;
+                        width: 5vw;
+
+                        opacity: 0;
+
+                        transition: all 150ms ease-in-out;
+
+                        &:hover {
+                            opacity: 1;
+                            width: 7vw;
+                        }
+                    }
+
+                    .slick-next {
+                        display: inline !important;
+                        color: rgba(var(--background-color-contrast), 0.5);
+
+                        z-index: 100;
+
+                        top: 0;
+                        right: 0;
+
+                        height: 100%;
+                        width: 5vw;
+
+                        opacity: 0;
+
+                        transition: all 150ms ease-in-out;
+
+                        &:hover {
+                            opacity: 1;
+                            width: 7vw;
+                        }
+                    }
+                }
+
+                .slick-track {
+                    display: flex;
+                    align-items: center;
+                }
+
+                .slick-slide {
+                    height: 100%;
+
+                    div {
+                        height: 100%;
+                    }
+                }
+
+                .ant-carousel,
+                .slick-slider,
+                .slick-list,
+                .slick-track {
+                    height: 100%;
+                }
+
                 .addition {
                     width: 100%;
                     height: 100%;
@@ -155,28 +221,45 @@
                     // fixtures for media content
                     img {
                         width: 100%;
+                        height: 100%;
+
                         border-radius: 12px;
 
                         user-select: none;
                         -webkit-user-drag: none;
+
+                        object-fit: cover;
                     }
 
                     video {
                         width: 100%;
+                        height: 100%;
+
                         border-radius: 12px;
 
                         user-select: none;
                         -webkit-user-drag: none;
+
+                        object-fit: cover;
                     }
 
                     audio {
                         width: 100%;
+                        height: 100%;
 
                         user-select: none;
                         -webkit-user-drag: none;
                     }
+
+                    >div {
+                        height: 100%;
+                    }
                 }
             }
+
+            >div {
+                margin-bottom: 10px;
+            }
         }
 
         >div {