Update src/app/shop/[id]/page.tsx

This commit is contained in:
2026-02-25 11:41:43 +00:00
parent daa594bc1c
commit 8de7fb4331

View File

@@ -2,7 +2,6 @@
import { Suspense, use, useCallback } from "react";
import { useRouter } from "next/navigation";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
@@ -101,14 +100,12 @@ function ProductPageContent({ params }: ProductPageProps) {
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
{navbar}
</div>
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading product...</p>
</main>
</ReactLenis>
<div id="nav" data-section="nav">
{navbar}
</div>
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading product...</p>
</main>
</ThemeProvider>
);
}
@@ -127,22 +124,20 @@ function ProductPageContent({ params }: ProductPageProps) {
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
{navbar}
<div id="nav" data-section="nav">
{navbar}
</div>
<main className="min-h-screen flex items-center justify-center pt-20">
<div className="text-center">
<p className="text-foreground mb-4">Product not found</p>
<button
onClick={() => router.push("/shop")}
className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
>
Back to Shop
</button>
</div>
<main className="min-h-screen flex items-center justify-center pt-20">
<div className="text-center">
<p className="text-foreground mb-4">Product not found</p>
<button
onClick={() => router.push("/shop")}
className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
>
Back to Shop
</button>
</div>
</main>
</ReactLenis>
</main>
</ThemeProvider>
);
}
@@ -160,47 +155,45 @@ function ProductPageContent({ params }: ProductPageProps) {
secondaryButtonStyle="layered"
headingFontWeight="light"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
{navbar}
</div>
<div id="product-detail-card" data-section="product-detail-card">
<ProductDetailCard
layout="page"
name={product.name}
price={product.price}
salePrice={meta.salePrice}
rating={product.rating || 0}
description={product.description}
images={images}
variants={variants.length > 0 ? variants : undefined}
quantity={quantityVariant}
ribbon={meta.ribbon}
inventoryStatus={meta.inventoryStatus}
inventoryQuantity={meta.inventoryQuantity}
sku={meta.sku}
buttons={[
{ text: "Add To Cart", onClick: handleAddToCart },
{ text: "Buy Now", onClick: handleBuyNow },
]}
/>
</div>
<div id="product-cart" data-section="product-cart">
<ProductCart
isOpen={cartOpen}
onClose={() => setCartOpen(false)}
items={cartItems}
onQuantityChange={updateQuantity}
onRemove={removeItem}
total={`$${cartTotal}`}
buttons={[
{
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
},
]}
/>
</div>
</ReactLenis>
<div id="nav" data-section="nav">
{navbar}
</div>
<div id="product-detail-card" data-section="product-detail-card">
<ProductDetailCard
layout="page"
name={product.name}
price={product.price}
salePrice={meta.salePrice}
rating={product.rating || 0}
description={product.description}
images={images}
variants={variants.length > 0 ? variants : undefined}
quantity={quantityVariant}
ribbon={meta.ribbon}
inventoryStatus={meta.inventoryStatus}
inventoryQuantity={meta.inventoryQuantity}
sku={meta.sku}
buttons={[
{ text: "Add To Cart", onClick: handleAddToCart },
{ text: "Buy Now", onClick: handleBuyNow },
]}
/>
</div>
<div id="product-cart" data-section="product-cart">
<ProductCart
isOpen={cartOpen}
onClose={() => setCartOpen(false)}
items={cartItems}
onQuantityChange={updateQuantity}
onRemove={removeItem}
total={`$${cartTotal}`}
buttons={[
{
text: isCheckoutLoading ? "Processing..." : "Check Out", onClick: handleCheckout,
},
]}
/>
</div>
</ThemeProvider>
);
}