Update src/app/shop/page.tsx

This commit is contained in:
2026-02-23 09:49:46 +00:00
parent ab13fcc736
commit 67dd86ee36

View File

@@ -1,4 +1,4 @@
use client";
"use client";
import { Suspense, useCallback } from "react";
import ReactLenis from "lenis/react";
@@ -41,36 +41,6 @@ function ShopPageContent() {
await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
}, [cartItems, checkout, getCheckoutItems]);
if (isLoading) {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="small"
sizing="largeSmall"
background="grid"
cardStyle="glass-elevated"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarStyleApple
brandName="Gladiatogo"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/>
</div>
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading products...</p>
</main>
</ReactLenis>
</ThemeProvider>
);
}
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -85,52 +55,60 @@ function ShopPageContent() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<div id="nav" data-section="nav">
<NavbarStyleApple
brandName="Gladiatogo"
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/>
</div>
<div id="product-catalog" data-section="product-catalog">
<ProductCatalog
layout="page"
products={products}
searchValue={search}
onSearchChange={setSearch}
searchPlaceholder="Search products..."
filters={filters}
emptyMessage="No products found"
/>
</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>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-photo/car-with-lights-driving-down-road_23-2151850179.jpg?_wi=3"
imageAlt="Road with cars at sunset"
logoText="Gladiatogo"
columns={[
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Our Fleet", href: "#fleet" }, { label: "Careers", href: "#" }] },
{ title: "Support", items: [{ label: "FAQs", href: "#faq" }, { label: "Contact", href: "#contact" }, { label: "Help Center", href: "#" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
]}
copyrightText="© 2024 Gladiatogo. All rights reserved."
/>
</div>
{isLoading ? (
<main className="min-h-screen flex items-center justify-center pt-20">
<p className="text-foreground">Loading products...</p>
</main>
) : (
<>
<div id="product-catalog" data-section="product-catalog">
<ProductCatalog
layout="page"
products={products}
searchValue={search}
onSearchChange={setSearch}
searchPlaceholder="Search products..."
filters={filters}
emptyMessage="No products found"
/>
</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>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-photo/car-with-lights-driving-down-road_23-2151850179.jpg"
imageAlt="Road with cars at sunset"
logoText="Gladiatogo"
columns={[
{ title: "Company", items: [{ label: "About Us", href: "/#about" }, { label: "Our Fleet", href: "/#product" }, { label: "Careers", href: "#" }] },
{ title: "Support", items: [{ label: "FAQs", href: "/#faq" }, { label: "Contact", href: "/#contact" }, { label: "Help Center", href: "#" }] },
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] }
]}
copyrightText="© 2024 Gladiatogo. All rights reserved."
/>
</div>
</>
)}
</ReactLenis>
</ThemeProvider>
);