crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(poc): carousel and improved sub-collections

Browse Source
This commit is contained in:
Björn Meyer
2023-07-13 12:05:07 +02:00
parent 8dcf6db08f
commit 8550185eae
10 changed files with 239 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/search/(collection)/[...collection]/page.tsx
View File

@@ -3,6 +3,8 @@ import { Metadata } from 'next';
import { notFound } from 'next/navigation';
import Grid from 'components/grid';
import Collections from 'components/layout/search/collections';
import FilterList from 'components/layout/search/filter';
import ProductGridItems from 'components/layout/product-grid-items';
import Pagination from 'components/collection/pagination';
import { defaultSort, sorting } from 'lib/constants';
@@ -47,13 +49,21 @@ export default async function CategoryPage({
{products.length === 0 ? (
<p className="py-3 text-lg">{`No products found in this collection`}</p>
) : (
<div>
<Grid className="grid-cols-2 lg:grid-cols-3">
<ProductGridItems products={products} />
</Grid>
<nav aria-label="Collection pagination" className='block sm:flex items-center'>
<Pagination itemsPerPage={limit} itemsTotal={total} currentPage={page ? parseInt(page) - 1 : 0} />
</nav>
<div className='mx-auto flex max-w-7xl flex-col bg-white py-6 text-black dark:bg-black dark:text-white md:flex-row'>
<div className="order-first flex-none md:w-1/6">
<Collections collection={params.collection} />
</div>
<div className="order-last min-h-screen w-full md:order-none">
<Grid className="grid-cols-2 lg:grid-cols-3">
<ProductGridItems products={products} />
</Grid>
<nav aria-label="Collection pagination" className='block sm:flex items-center'>
<Pagination itemsPerPage={limit} itemsTotal={total} currentPage={page ? parseInt(page) - 1 : 0} />
</nav>
</div>
<div className="order-none md:order-last md:w-1/6 md:flex-none">
<FilterList list={sorting} title="Sort by" />
</div>
</div>
)}
</section>