forked from crowetic/commerce
New UI Primitices
This commit is contained in:
parent
cf9495e6c2
commit
aa657c8baa
@ -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
|
|
@ -1 +0,0 @@
|
|||||||
export { default } from './ProductGrid'
|
|
@ -1,4 +1,3 @@
|
|||||||
export { default as Swatch } from './Swatch'
|
export { default as Swatch } from './Swatch'
|
||||||
export { default as ProductView } from './ProductView'
|
export { default as ProductView } from './ProductView'
|
||||||
export { default as ProductCard } from './ProductCard'
|
export { default as ProductCard } from './ProductCard'
|
||||||
export { default as ProductGrid } from './ProductGrid'
|
|
||||||
|
@ -3,7 +3,7 @@
|
|||||||
@apply grid grid-cols-1 lg:grid-cols-3 lg:grid-rows-2 gap-0;
|
@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;
|
height: 500px;
|
||||||
max-height: 800px;
|
max-height: 800px;
|
||||||
|
|
||||||
@ -35,12 +35,12 @@
|
|||||||
|
|
||||||
.layoutB {
|
.layoutB {
|
||||||
& > div:nth-child(6n + 2) {
|
& > 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);
|
height: var(--row-height);
|
||||||
}
|
}
|
||||||
|
|
||||||
& > div:nth-child(6n + 4) {
|
& > 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);
|
height: var(--row-height);
|
||||||
}
|
}
|
||||||
|
|
40
components/ui/Grid/Grid.tsx
Normal file
40
components/ui/Grid/Grid.tsx
Normal 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
|
1
components/ui/Grid/index.ts
Normal file
1
components/ui/Grid/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './Grid'
|
11
components/ui/Marquee/Marquee.module.css
Normal file
11
components/ui/Marquee/Marquee.module.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
.root {
|
||||||
|
@apply bg-white py-10 flex flex-row w-full;
|
||||||
|
}
|
||||||
|
|
||||||
|
.primary {
|
||||||
|
@apply bg-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.secondary {
|
||||||
|
@apply bg-violet;
|
||||||
|
}
|
38
components/ui/Marquee/Marquee.tsx
Normal file
38
components/ui/Marquee/Marquee.tsx
Normal 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
|
1
components/ui/Marquee/index.ts
Normal file
1
components/ui/Marquee/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './Marquee'
|
@ -2,3 +2,5 @@ export { default as Button } from './Button'
|
|||||||
export { default as Container } from './Container'
|
export { default as Container } from './Container'
|
||||||
export { default as Sidebar } from './Sidebar'
|
export { default as Sidebar } from './Sidebar'
|
||||||
export { default as Logo } from './Logo'
|
export { default as Logo } from './Logo'
|
||||||
|
export { default as Grid } from './Grid'
|
||||||
|
export { default as Marquee } from './Marquee'
|
||||||
|
@ -1,12 +1,12 @@
|
|||||||
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
|
||||||
import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
|
import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
|
||||||
import { Layout } from '@components/core'
|
import { Layout } from '@components/core'
|
||||||
import { ProductGrid } from '@components/product'
|
import { Grid, Marquee } from '@components/ui'
|
||||||
|
|
||||||
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
export async function getStaticProps({ preview }: GetStaticPropsContext) {
|
||||||
const { products } = await getAllProducts()
|
const { products } = await getAllProducts()
|
||||||
return {
|
return {
|
||||||
props: { products: products.slice(0, 6) },
|
props: { products },
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -15,13 +15,36 @@ export default function Home({
|
|||||||
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
}: InferGetStaticPropsType<typeof getStaticProps>) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ProductGrid
|
<Grid items={products.slice(0, 3)} />
|
||||||
products={[...products, ...products, ...products, ...products]}
|
<Marquee
|
||||||
layout="C"
|
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} /> */}
|
<Grid items={products.slice(3, 6)} layout="B" />
|
||||||
{/* <div></div> */}
|
<Marquee
|
||||||
{/* <ProductGrid products={products.slice(3)} /> */}
|
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>
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user