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

fix: update PDP layout

Browse Source 
Signed-off-by: Chloe <vanguyen.work@gmail.com>
This commit is contained in:
Chloe
2024-06-17 11:04:43 +07:00
parent 3ac4b140c9
commit a11287d4ad
14 changed files with 390 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
app/product/[handle]/page.tsx
View File

@@ -85,8 +85,12 @@ export default async function ProductPage({ params }: { params: { handle: string
<div className="hidden lg:block">
<BreadcrumbComponent type="product" handle={product.handle} />
</div>
<div className="my-3 flex flex-col space-x-0 rounded-lg border border-neutral-200 bg-white p-6 dark:border-neutral-800 dark:bg-black md:p-10 lg:flex-row lg:gap-8 lg:space-x-3">
<div className="my-3 flex flex-col space-x-0 lg:flex-row lg:gap-8 lg:space-x-3">
<div className="h-full w-full basis-full lg:basis-7/12">
<ProductDescription product={product} />
</div>
<div className="basis-full lg:basis-5/12">
<Suspense
fallback={
<div className="aspect-square relative h-full max-h-[550px] w-full overflow-hidden" />
@@ -100,18 +104,12 @@ export default async function ProductPage({ params }: { params: { handle: string
/>
</Suspense>
</div>
<div className="basis-full lg:basis-5/12">
<ProductDescription product={product} />
</div>
</div>
<Suspense>
<RelatedProducts id={product.id} />
</Suspense>
</div>
<Suspense>
<Footer />
</Suspense>
<Footer />
</>
);
}