fix cardlist

index.d.ts

@@ -127,6 +127,7 @@ interface CardListProps {
   cards?: CardProps[];
   layout?: 'row' | 'col' | 'grid';
   className?: string;
+  anime?: boolean;
 }
 export function CardList(props: CardListProps): JSX.Element;
 

src/components/core/CardList.tsx

@@ -2,9 +2,6 @@ import React from "react";
 import { IGatsbyImageData } from "gatsby-plugin-image";
 
 import Card from "./Card";
-import CardListColumn from "./cardlist/CardListColumn";
-import CardListGrid from "./cardlist/CardListGrid";
-import CardListRow from "./cardlist/CardListRow";
 
 
 interface CardProps {
@@ -21,29 +18,21 @@ interface Props {
     cards?: CardProps[];
     layout?: 'row' | 'col' | 'grid';
     className?: string;
+    anime?: boolean;
 }
 
 
-const oComponents = {
-    'row': CardListRow,
-    'col': CardListColumn,
-    'grid': CardListGrid
-}
-
 const oCardProps = {
     'row': {
         layout: 'left',
-        anime: false,
         className: ''
     },
     'col': {
         layout: 'top',
-        anime: true,
         className: ''
     },
     'grid': {
         layout: 'top',
-        anime: true,
         className: 'max-w-full'
     }
 }
@@ -53,16 +42,23 @@ const CardList = (props: Props) => {
     const {
         cards = [],
         layout = 'row',
-        className = ''
+        className = '',
+        anime = true
     } = props;
     
-    const CardListComponent = oComponents[layout];
+    const oListClassName = {
+        'row': `space-y-10 w-full ${className}`,
+        'col': `flex space-x-12 flex-nowrap justify-center ${className}`,
+        'grid': `grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-12 ${className}`
+    }
+    
     const tmpProps = oCardProps[layout];
     
     const listCards = cards.map((card, index) => {
         let cardProps = {
             ...card, 
-            ...tmpProps
+            ...tmpProps,
+            anime
         };
 
         return (
@@ -74,11 +70,11 @@ const CardList = (props: Props) => {
     })
 
     return (
-        <CardListComponent
-            className={className}
+        <div
+            className={oListClassName[layout]}
         >
             {listCards}
-        </CardListComponent>
+        </div>
     )
 };
 

src/components/core/cardlist/CardListColumn.tsx

-import React, { PropsWithChildren } from "react";
-
-
-interface Props {
-    className?: string;
-}
-
-
-const CardListColumn = (props: PropsWithChildren<Props>) => {
-    const {
-        children,
-        className = ''
-    } = props;
-    
-    return (
-        <div className={`${className} flex space-x-12 flex-nowrap justify-center`}>
-            {children}
-        </div>
-    )
-};
-
-
-export default CardListColumn;
\ No newline at end of file

src/components/core/cardlist/CardListGrid.tsx

-import React, { PropsWithChildren } from "react";
-
-
-interface Props {
-    className?: string;
-}
-
-
-const CardListGrid = (props: PropsWithChildren<Props>) => {
-    const {
-        children,
-        className = ''
-    } = props;
-    
-    return (
-        <div className={`${className} grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-12`}>
-            {children}
-        </div>
-    )
-};
-
-
-export default CardListGrid;
\ No newline at end of file

src/components/core/cardlist/CardListRow.tsx

-import React, { PropsWithChildren } from "react";
-
-
-interface Props {
-    className?: string;
-}
-
-
-const CardListRow = (props: PropsWithChildren<Props>) => {
-    const {
-        children,
-        className = ''
-    } = props;
-    
-    return (
-        <div className={`${className} space-y-10 w-full`}>
-            {children}
-        </div>
-    )
-};
-
-
-export default CardListRow;
\ No newline at end of file

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

@@ -24,6 +24,7 @@ interface CardProps {
   anime?: boolean;
   layout?: "top" | "left";
   className?: string;
+  anime?: boolean;
 }
 interface CardListProps {
   cards?: CardProps[];
@@ -49,6 +50,7 @@ interface CardListProps {
             content: 'Action description for the Button'
           }]} 
           layout='row'
+          anime={false}
         />
         <CardList 
           cards={[{