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 ProductView } from './ProductView'
|
||||
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 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);
|
||||
}
|
||||
|
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 Sidebar } from './Sidebar'
|
||||
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 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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user