Skip to content
Snippets Groups Projects
Commit 70ad8bbc authored by tovo's avatar tovo
Browse files

cardlist

parent 98b8f124
No related branches found
No related tags found
No related merge requests found
......@@ -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";
......@@ -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";
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
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
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
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
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment