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

Update to new design. (#1103)

Browse Source
This commit is contained in:
Lee Robinson
2023-07-24 21:40:29 -05:00
committed by GitHub
parent d918fcc895
commit 59fc2bc2e9
61 changed files with 1002 additions and 1247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/search/[collection]/page.tsx
View File

@@ -40,7 +40,7 @@ export default async function CategoryPage({
{products.length === 0 ? (
<p className="py-3 text-lg">{`No products found in this collection`}</p>
) : (
<Grid className="grid-cols-2 lg:grid-cols-3">
<Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<ProductGridItems products={products} />
</Grid>
)}

6
app/search/layout.tsx
View File

@@ -7,12 +7,12 @@ import { Suspense } from 'react';
export default function SearchLayout({ children }: { children: React.ReactNode }) {
return (
<Suspense>
<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">
<div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
<div className="order-first w-full flex-none md:max-w-[125px]">
<Collections />
</div>
<div className="order-last min-h-screen w-full md:order-none">{children}</div>
<div className="order-none md:order-last md:w-1/6 md:flex-none">
<div className="order-none flex-none md:order-last md:w-[125px]">
<FilterList list={sorting} title="Sort by" />
</div>
</div>

4
app/search/loading.tsx
View File

@@ -6,7 +6,9 @@ export default function Loading() {
{Array(12)
.fill(0)
.map((_, index) => {
return <Grid.Item key={index} className="animate-pulse bg-gray-100 dark:bg-gray-900" />;
return (
<Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-900" />
);
})}
</Grid>
);

2
app/search/page.tsx
View File

@@ -32,7 +32,7 @@ export default async function SearchPage({
</p>
) : null}
{products.length > 0 ? (
<Grid className="grid-cols-2 lg:grid-cols-3">
<Grid className="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
<ProductGridItems products={products} />
</Grid>
) : null}