cardlist

index.d.ts

@@ -78,4 +78,11 @@ interface HeroProps {
  */
 export function Hero(props: HeroProps): JSX.Element;
 
+interface CardListProps {
+  cards?: CardProps[];
+  layout?: 'row' | 'col' | 'grid';
+  className?: string;
+}
+export function CardList(props: CardListProps): JSX.Element;
+
 declare module "@onegeo/gatsby-theme-onegeo";

index.js

@@ -9,6 +9,7 @@ export { default as Button } from "./src/components/core/Button";
 export { default as Card } from "./src/components/core/Card";
 export { default as Link } from "./src/components/core/Link";
 export { default as Search } from "./src/components/core/Search";
+export { default as CardList } from "./src/components/core/CardList";
 
 // Feature components
 export { default as Hero } from "./src/components/Hero";

src/components/core/CardList.tsx

+import React from "react";
+
+import Card from "./Card";
+import CardListColumn from "./cardlist/CardListColumn";
+import CardListGrid from "./cardlist/CardListGrid";
+import CardListRow from "./cardlist/CardListRow";
+
+
+interface CardProps {
+    to?: string;
+    className?: string;
+    anime?: boolean;
+    side?: boolean;
+    icon?: string;
+    title?: string;
+    content?: string;
+}
+
+interface Props {
+    cards?: CardProps[];
+    layout?: 'row' | 'col' | 'grid';
+    className?: string;
+}
+
+
+const oComponents = {
+    'row': CardListRow,
+    'col': CardListColumn,
+    'grid': CardListGrid
+}
+
+
+const CardList = (props: Props) => {
+    const {
+        cards = [],
+        layout = 'row',
+        className = ''
+    } = props;
+    
+    const CardListComponent = oComponents[layout];
+
+    const listCards = cards.map((card, index) => {
+        let tmpProps = {
+            side: false,
+            anime: true,
+            className: ''
+        };
+        
+        if (layout == 'row') {
+            tmpProps = {
+                side: true,
+                anime: false,
+                className: 'max-w-full'
+            };
+        }
+
+        let cardProps = {
+            ...card, 
+            ...tmpProps
+        };
+
+        return (
+            <Card
+                key={index}
+                {...cardProps}
+            />
+        )
+    })
+
+    return (
+        <CardListComponent
+            className={className}
+        >
+            {listCards}
+        </CardListComponent>
+    )
+};
+
+
+export default CardList;
\ No newline at end of file

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`}>
+            {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