4
0
forked from crowetic/commerce

New UI Primitices

This commit is contained in:
Belen Curcio 2020-10-04 15:16:56 -03:00
parent cf9495e6c2
commit aa657c8baa
11 changed files with 127 additions and 45 deletions

View File

@ -1,32 +0,0 @@
import cn from 'classnames'
import { FC } from 'react'
import s from './ProductGrid.module.css'
import ProductCard from '@components/product/ProductCard'
interface Props {
className?: string
children?: any
products: [any] | any
layout?: 'A' | 'B' | 'C' | 'D'
}
const ProductView: FC<Props> = ({ products, className, layout = 'A' }) => {
const rootClassName = cn(
s.root,
{
[s.layoutA]: layout === 'A',
[s.layoutB]: layout === 'B',
[s.layoutC]: layout === 'C',
[s.layoutD]: layout === 'D',
},
className
)
return (
<div className={rootClassName}>
{products.map((data: any) => (
<ProductCard productData={data.node} />
))}
</div>
)
}
export default ProductView

View File

@ -1 +0,0 @@
export { default } from './ProductGrid'

View File

@ -1,4 +1,3 @@
export { default as Swatch } from './Swatch'
export { default as ProductView } from './ProductView'
export { default as ProductCard } from './ProductCard'
export { default as ProductGrid } from './ProductGrid'

View File

@ -3,7 +3,7 @@
@apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
& > * {
@apply row-span-1 lg:col-span-1 bg-black border border-yellow-300 box-border overflow-hidden;
@apply row-span-1 lg:col-span-1 bg-black box-border overflow-hidden;
height: 500px;
max-height: 800px;
@ -35,12 +35,12 @@
.layoutB {
& > div:nth-child(6n + 2) {
@apply row-span-2 lg:col-span-2 bg-violet;
@apply row-span-2 lg:col-span-2 bg-blue;
height: var(--row-height);
}
& > div:nth-child(6n + 4) {
@apply row-span-2 lg:col-span-2 bg-blue;
@apply row-span-2 lg:col-span-2 bg-violet;
height: var(--row-height);
}

View File

@ -0,0 +1,40 @@
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
layout?: 'A' | 'B' | 'C' | 'D'
wrapper?: ReactNode | Component | any
}
const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT ITEMS WRAPPER
const Grid: FC<Props> = ({
items = [],
className,
layout = 'A',
wrapper: Component = DefaultWrapper,
}) => {
const rootClassName = cn(
s.root,
{
[s.layoutA]: layout === 'A',
[s.layoutB]: layout === 'B',
[s.layoutC]: layout === 'C',
[s.layoutD]: layout === 'D',
},
className
)
return (
<div className={rootClassName}>
{items.map((data: any) => (
<Component {...data} />
))}
</div>
)
}
export default Grid

View File

@ -0,0 +1 @@
export { default } from './Grid'

View File

@ -0,0 +1,11 @@
.root {
@apply bg-white py-10 flex flex-row w-full;
}
.primary {
@apply bg-white;
}
.secondary {
@apply bg-violet;
}

View File

@ -0,0 +1,38 @@
import cn from 'classnames'
import s from './Marquee.module.css'
import { FC } from 'react'
interface Props {
className?: string
children?: any
items: any[]
wrapper?: React.Component | any
variant?: 'primary' | 'secondary'
}
const DefaultWrapper: FC<Props> = ({ children }) => <div>{children}</div> // DEFAULT PRODUCT WRAPPER
const Marquee: FC<Props> = ({
className = '',
items,
wrapper: Component = DefaultWrapper,
variant = 'white',
}) => {
const rootClassName = cn(
s.root,
{
[s.primary]: variant === 'primary',
[s.secondary]: variant === 'secondary',
},
className
)
return (
<div className={rootClassName}>
{items.map((p: any) => (
<Component {...p} />
))}
</div>
)
}
export default Marquee

View File

@ -0,0 +1 @@
export { default } from './Marquee'

View File

@ -2,3 +2,5 @@ export { default as Button } from './Button'
export { default as Container } from './Container'
export { default as Sidebar } from './Sidebar'
export { default as Logo } from './Logo'
export { default as Grid } from './Grid'
export { default as Marquee } from './Marquee'

View File

@ -1,12 +1,12 @@
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
import { Layout } from '@components/core'
import { ProductGrid } from '@components/product'
import { Grid, Marquee } from '@components/ui'
export async function getStaticProps({ preview }: GetStaticPropsContext) {
const { products } = await getAllProducts()
return {
props: { products: products.slice(0, 6) },
props: { products },
}
}
@ -15,13 +15,36 @@ export default function Home({
}: InferGetStaticPropsType<typeof getStaticProps>) {
return (
<>
<ProductGrid
products={[...products, ...products, ...products, ...products]}
layout="C"
<Grid items={products.slice(0, 3)} />
<Marquee
items={products.slice(0, 3)}
wrapper={(p: any) => (
<div className="flex flex-1 justify-end">
<img
className="w-full"
src={p.node.images.edges[0].node.urlSmall}
/>
<span className="bg-black text-white inline-block p-3 font-bold text-2xl break-words">
{p.node.name}
</span>
</div>
)}
/>
{/* <ProductGrid products={[...products.slice(0, 3)]} layout={2} /> */}
{/* <div></div> */}
{/* <ProductGrid products={products.slice(3)} /> */}
<Grid items={products.slice(3, 6)} layout="B" />
<Marquee
variant="secondary"
items={products.slice(0, 3)}
wrapper={() => (
<div className="flex flex-1">
<h3 className="bg-black text-white inline p-3 font-bold text-2xl">
This is a very short title
</h3>
</div>
)}
/>
<div className="bg-black">
<h2 className=""> A very long title with a nice description</h2>
</div>
</>
)
}