forked from crowetic/commerce
Merge branch 'master' of https://github.com/okbel/e-comm-example
This commit is contained in:
commit
3c45f254da
@ -0,0 +1,23 @@
|
|||||||
|
.root {
|
||||||
|
@apply py-12 flex flex-col w-full px-6;
|
||||||
|
|
||||||
|
@screen md {
|
||||||
|
@apply flex-row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.asideWrapper {
|
||||||
|
@apply pr-3 w-full relative;
|
||||||
|
|
||||||
|
@screen md {
|
||||||
|
@apply w-48;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside {
|
||||||
|
@apply flex flex-row w-full justify-around mb-12;
|
||||||
|
|
||||||
|
@screen md {
|
||||||
|
@apply mb-0 block sticky top-32;
|
||||||
|
}
|
||||||
|
}
|
66
components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx
Normal file
66
components/core/HomeAllProductsGrid/HomeAllProductsGrid.tsx
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import { FC } from 'react'
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { getCategoryPath, getDesignerPath } from '@utils/search'
|
||||||
|
import { Grid } from '@components/ui'
|
||||||
|
import { ProductCard } from '@components/product'
|
||||||
|
import s from './HomeAllProductsGrid.module.css'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
categories?: any
|
||||||
|
brands?: any
|
||||||
|
newestProducts?: any
|
||||||
|
}
|
||||||
|
|
||||||
|
const Head: FC<Props> = ({ categories, brands, newestProducts }) => {
|
||||||
|
return (
|
||||||
|
<div className={s.root}>
|
||||||
|
<div className={s.asideWrapper}>
|
||||||
|
<div className={s.aside}>
|
||||||
|
<ul className="mb-10">
|
||||||
|
<li className="py-1 text-base font-bold tracking-wide">
|
||||||
|
<Link href={getCategoryPath('')}>
|
||||||
|
<a>All Categories</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
{categories.map((cat: any) => (
|
||||||
|
<li key={cat.path} className="py-1 text-accents-8">
|
||||||
|
<Link href={getCategoryPath(cat.path)}>
|
||||||
|
<a>{cat.name}</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<ul className="">
|
||||||
|
<li className="py-1 text-base font-bold tracking-wide">
|
||||||
|
<Link href={getDesignerPath('')}>
|
||||||
|
<a>All Designers</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
{brands.flatMap(({ node }: any) => (
|
||||||
|
<li key={node.path} className="py-1 text-accents-8">
|
||||||
|
<Link href={getDesignerPath(node.path)}>
|
||||||
|
<a>{node.name}</a>
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<Grid layout="normal">
|
||||||
|
{newestProducts.map(({ node }: any) => (
|
||||||
|
<ProductCard
|
||||||
|
key={node.path}
|
||||||
|
product={node}
|
||||||
|
variant="simple"
|
||||||
|
imgWidth={480}
|
||||||
|
imgHeight={480}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Head
|
1
components/core/HomeAllProductsGrid/index.ts
Normal file
1
components/core/HomeAllProductsGrid/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default } from './HomeAllProductsGrid'
|
@ -48,7 +48,8 @@
|
|||||||
@apply hidden;
|
@apply hidden;
|
||||||
|
|
||||||
@screen sm {
|
@screen sm {
|
||||||
@apply block absolute bottom-6 left-1/2 -translate-x-1/2 transform;
|
@apply block absolute bottom-6 left-1/2;
|
||||||
|
transform: translateX(-50%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -5,11 +5,10 @@ import getAllProducts from '@lib/bigcommerce/api/operations/get-all-products'
|
|||||||
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
import getSiteInfo from '@lib/bigcommerce/api/operations/get-site-info'
|
||||||
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
|
import getAllPages from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||||
import rangeMap from '@lib/range-map'
|
import rangeMap from '@lib/range-map'
|
||||||
import { getCategoryPath, getDesignerPath } from '@utils/search'
|
|
||||||
import { Layout } from '@components/core'
|
import { Layout } from '@components/core'
|
||||||
import { Grid, Marquee, Hero } from '@components/ui'
|
import { Grid, Marquee, Hero } from '@components/ui'
|
||||||
import { ProductCard } from '@components/product'
|
import { ProductCard } from '@components/product'
|
||||||
import Link from 'next/link'
|
import HomeAllProductsGrid from '@components/core/HomeAllProductsGrid'
|
||||||
|
|
||||||
export async function getStaticProps({
|
export async function getStaticProps({
|
||||||
preview,
|
preview,
|
||||||
@ -129,53 +128,11 @@ export default function Home({
|
|||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Marquee>
|
</Marquee>
|
||||||
<div className="py-12 flex flex-row w-full px-6">
|
<HomeAllProductsGrid
|
||||||
<div className="pr-3 w-48 relative">
|
categories={categories}
|
||||||
<div className="sticky top-32">
|
brands={brands}
|
||||||
<ul className="mb-10">
|
newestProducts={newestProducts}
|
||||||
<li className="py-1 text-base font-bold tracking-wide">
|
/>
|
||||||
<Link href={getCategoryPath('')}>
|
|
||||||
<a>All Categories</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
{categories.map((cat) => (
|
|
||||||
<li key={cat.path} className="py-1 text-accents-8">
|
|
||||||
<Link href={getCategoryPath(cat.path)}>
|
|
||||||
<a>{cat.name}</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
<ul className="">
|
|
||||||
<li className="py-1 text-base font-bold tracking-wide">
|
|
||||||
<Link href={getDesignerPath('')}>
|
|
||||||
<a>All Designers</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
{brands.flatMap(({ node }) => (
|
|
||||||
<li key={node.path} className="py-1 text-accents-8">
|
|
||||||
<Link href={getDesignerPath(node.path)}>
|
|
||||||
<a>{node.name}</a>
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1">
|
|
||||||
<Grid layout="normal">
|
|
||||||
{newestProducts.map(({ node }) => (
|
|
||||||
<ProductCard
|
|
||||||
key={node.path}
|
|
||||||
product={node}
|
|
||||||
variant="simple"
|
|
||||||
imgWidth={480}
|
|
||||||
imgHeight={480}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Grid>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user