Merge branch 'feat/carousel' into 'main'

maj component carousel

See merge request onegeo/gatsby-theme-onegeo!40

index.d.ts

@@ -121,9 +121,7 @@ interface DataImage {
 }
 interface ICarousel {
     images: Array<DataImage>
-    isLogo: boolean
     delay?: number
-    fullSize?: boolean
 }
 export function Carousel(props: ICarousel): JSX.Element
 

src/components/core/Carousel.tsx

@@ -6,13 +6,11 @@ interface DataImage {
 
 interface Props {
     images: Array<DataImage>
-    isLogo: boolean
     delay?: number
-    fullSize?: boolean
 }
 
 const Carousel = (props: Props) => {
-    const { images, isLogo, delay, fullSize } = props
+    const { images, delay } = props
     const [index, setIndex] = useState(1)
 
     const nbr_image: number = images.length
@@ -42,86 +40,48 @@ const Carousel = (props: Props) => {
     })
 
     return (
-        <div
-            className={`block relative ${
-                isLogo
-                    ? "flex items-center w-1/2 box-content float-none"
-                    : "flex items-center"
-            }`}
-        >
-            <div className="btn-carousel">
-                <button
-                    onClick={() => updateIndex(index - 1)}
-                    className={`bg-neutral rounded-3xl  ${
-                        isLogo ? "w-5" : "w-10 absolute z-10 left-2"
-                    } h-10 text-base-100`}
-                >
-                    ❮
-                </button>
+        <div className={`flex items-center `}>
+            <div className="relative">
+                <div className="btn-carousel  absolute z-50 left-3 -mt-5">
+                    <button
+                        onClick={() => updateIndex(index - 1)}
+                        className={`bg-neutral rounded-3xl w-10 h-10 text-base-100`}
+                    >
+                        ❮
+                    </button>
+                </div>
             </div>
             <div
-                className={`inline-block align-middle carousel ${
-                    isLogo ? "w-1/2 ml-2 mr-2" : "w-full"
-                } truncate`}
+                className={`inline-block align-middle carousel  w-full truncate max-h-80`}
             >
                 <div
-                    className={`whitespace-nowrap ${
-                        isLogo ? (fullSize ? "w-full" : "w-4/12") : "w-full"
-                    } `}
+                    className={`whitespace-nowrap w-full `}
                     style={{
-                        transform: isLogo
-                            ? nbr_image > 2
-                                ? fullSize
-                                    ? `translateX(-${index * 100}%)`
-                                    : `translateX(-${index * 60}%)`
-                                : `translateX(0)`
-                            : `translateX(-${index * 100}%)`,
+                        transform: `translateX(-${index * 100}%)`,
                         transition: "transform 0.3s",
                     }}
                 >
                     {images.map((item: any, key: any) => {
                         return (
                             <div
-                                className={`carousel-item relative w-full inline-block ${
-                                    isLogo
-                                        ? fullSize
-                                            ? "mr-0"
-                                            : "mr-5"
-                                        : "mr-0"
-                                }`}
+                                className={`carousel-item relative w-full inline-block mr-0`}
                                 key={key}
                             >
-                                {isLogo ? (
-                                    <div
-                                        className={`flex justify-center items-center ${
-                                            fullSize ? "w-full" : "w-full h-28"
-                                        } `}
-                                    >
-                                        <Image
-                                            image={item.src}
-                                            className="w-full border border-gray-600"
-                                        />
-                                    </div>
-                                ) : (
-                                    <Image
-                                        image={item.src}
-                                        className="w-full"
-                                    />
-                                )}
+                                <Image image={item.src} className="w-full" />
                             </div>
                         )
                     })}
                 </div>
             </div>
-            <div className="btn-carousel">
-                <button
-                    onClick={() => updateIndex(index + 1)}
-                    className={`bg-neutral rounded-3xl  ${
-                        isLogo ? "w-5" : "w-10 absolute z-10 right-2"
-                    } h-10 text-base-100`}
-                >
-                    ❯
-                </button>
+            <div className="relative">
+                <div className="btn-carousel absolute z-50 right-3 -mt-5">
+                    <button
+                        onClick={() => updateIndex(index + 1)}
+                        className={`bg-neutral rounded-3xl w-10 h-10 text-base-100`}
+                    >
+                        ❯
+                    </button>
+                </div>
             </div>
         </div>
     )

src/pages-doc/doc/core/carousel.tsx

@@ -6,16 +6,16 @@ import { Content,Link, Carousel } from "@onegeo/gatsby-theme-onegeo"
 const carousel = () => {
     const dataImage = [
         {
-            src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
+            src: "https://placeimg.com/800/200/arch",
         },
         {
-            src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
+            src: "https://placeimg.com/800/200/arch",
         },
         {
-            src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
+            src: "https://placeimg.com/800/200/arch",
         },
         {
-            src: "https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/",
+            src: "https://placeimg.com/800/200/arch",
         },
     ]
     return (
@@ -35,9 +35,7 @@ interface DataImage {
   
   interface Props {
     images: Array<DataImage>;
-    isLogo: boolean;
     delay?: number;
-    fullSize?: boolean
   }
   
   const dataImage = [
@@ -64,8 +62,13 @@ interface DataImage {
 
                 <h2>Example</h2>
             </div>
-            <Carousel images={dataImage} isLogo={false} delay={3000} />
-            <Carousel images={dataImage} isLogo={true} delay={2000} fullSize={true}/>
+            <div className="">
+                <Carousel images={dataImage}  delay={3000} />
+            </div>
+            <div className="mt-5">
+                <Carousel images={dataImage}  delay={6000} />
+            </div>
+
         </Content>
     )
 }