bender/b07c8bc0-1666-4322-837f-dc8ff42e077d
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
bender
2026-02-24 16:06:34 +00:00
parent e92dd80a7c
commit b6330c8b56
1 changed files with 17 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
src/app/shop/[id]/page.tsx
View File

@@ -1,180 +1,39 @@
"use client";
import { Suspense, use, useCallback } from "react";
import { useRouter } from "next/navigation";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
import ProductDetailCard from "@/components/ecommerce/productDetail/ProductDetailCard";
import ProductCart from "@/components/ecommerce/cart/ProductCart";
import { useProductDetail } from "@/hooks/useProductDetail";
import { useCart } from "@/hooks/useCart";
import { useCheckout } from "@/hooks/useCheckout";
interface ProductPageProps {
params: Promise<{ id: string }>;
params: { id: string };
}
export default function ProductPage({ params }: ProductPageProps) {
return (
<Suspense fallback={null}>
<ProductPageContent params={params} />
</Suspense>
);
}
function ProductPageContent({ params }: ProductPageProps) {
const { id } = use(params);
const router = useRouter();
const {
product,
isLoading,
images,
meta,
variants,
quantityVariant,
selectedQuantity,
createCartItem,
} = useProductDetail(id);
const {
items: cartItems,
isOpen: cartOpen,
setIsOpen: setCartOpen,
addItem,
updateQuantity,
removeItem,
total: cartTotal,
getCheckoutItems,
} = useCart();
const { buyNow, checkout, isLoading: isCheckoutLoading } = useCheckout();
const handleAddToCart = useCallback(() => {
const item = createCartItem();
if (item) {
addItem(item);
}
}, [createCartItem, addItem]);
const handleBuyNow = useCallback(() => {
if (product) {
buyNow(product, selectedQuantity);
}
}, [product, selectedQuantity, buyNow]);
const handleCheckout = useCallback(async () => {
if (cartItems.length === 0) return;
const currentUrl = new URL(window.location.href);
currentUrl.searchParams.set("success", "true");
await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
}, [cartItems, checkout, getCheckoutItems]);
const themeProviderProps = {
defaultButtonVariant: "expand-hover" as const,
defaultTextAnimation: "background-highlight" as const,
borderRadius: "pill",
contentWidth: "compact",
sizing: "largeSmallSizeLargeTitles",
background: "circleGradient",
cardStyle: "gradient-radial",
primaryButtonStyle: "double-inset",
secondaryButtonStyle: "layered",
headingFontWeight: "light"
defaultButtonVariant: "expand-hover", defaultTextAnimation: "background-highlight", borderRadius: "pill", contentWidth: "compact", sizing: "largeSmallSizeLargeTitles", background: "circleGradient", cardStyle: "gradient-radial", primaryButtonStyle: "double-inset", secondaryButtonStyle: "layered", headingFontWeight: "light"
};
const navbarProps = {
brandName: "No song", navItems: [
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" }
],
button: { text: "Cart", onClick: () => setCartOpen(true) }
{ name: "Products", id: "/#products-section" },
{ name: "About", id: "/#about-section" },
{ name: "Contact", id: "/#contact-section" },
]
};
if (isLoading) {
return (
<ThemeProvider {...themeProviderProps}>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarStyleApple {...navbarProps} />
</div>
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading product...</p>
</main>
</ReactLenis>
</ThemeProvider>
);
}
if (!product) {
return (
<ThemeProvider {...themeProviderProps}>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarStyleApple {...navbarProps} />
</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>
</ThemeProvider>
);
}
return (
<ThemeProvider {...themeProviderProps}>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarStyleApple {...navbarProps} />
<div id="nav" data-section="nav">
<NavbarStyleApple {...navbarProps} />
</div>
<main className="min-h-screen flex items-center justify-center pt-20 px-4">
<div className="text-center">
<h1 className="text-4xl font-bold">Product Details</h1>
<p className="mt-4 text-lg text-foreground/80">
Details for product ID: {params.id} will be displayed here soon.
</p>
</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>
</main>
</ThemeProvider>
);
}
}