4
0
forked from crowetic/commerce

46 lines
1.0 KiB
TypeScript
Raw Normal View History

2020-10-04 15:16:56 -03:00
import cn from 'classnames'
import { FC, ReactNode, Component } from 'react'
import s from './Grid.module.css'
interface Props {
className?: string
children?: any
items: [any] | any
2020-10-05 11:44:14 -03:00
layout?: 'A' | 'B' | 'C' | 'D' | 'normal'
2020-10-04 15:16:56 -03:00
wrapper?: ReactNode | Component | any
2020-10-05 14:28:59 -03:00
variant?: 'default' | 'filled'
2020-10-04 15:16:56 -03:00
}
const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT ITEMS WRAPPER
const Grid: FC<Props> = ({
items = [],
className,
layout = 'A',
wrapper: Component = DefaultWrapper,
2020-10-05 14:28:59 -03:00
variant = 'default',
2020-10-04 15:16:56 -03:00
}) => {
const rootClassName = cn(
s.root,
{
[s.layoutA]: layout === 'A',
[s.layoutB]: layout === 'B',
[s.layoutC]: layout === 'C',
[s.layoutD]: layout === 'D',
2020-10-05 11:44:14 -03:00
[s.layoutNormal]: layout === 'normal',
2020-10-05 14:28:59 -03:00
[s.default]: variant === 'default',
[s.filled]: variant === 'filled',
2020-10-04 15:16:56 -03:00
},
className
)
return (
<div className={rootClassName}>
2020-10-06 13:28:26 -05:00
{items.map((data: any, i: any) => (
<Component key={i} {...data} />
2020-10-04 15:16:56 -03:00
))}
</div>
)
}
export default Grid