Update src/app/shop/page.tsx

This commit is contained in:
2026-02-24 16:06:35 +00:00
parent b6330c8b56
commit ba2873478d

View File

@@ -1,76 +1,34 @@
"use client";
import { Suspense } from "react";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import { useProductCatalog } from "@/hooks/useProductCatalog";
function ShopPageContent() {
const {
products,
isLoading,
search,
setSearch,
filters,
} = useProductCatalog({ basePath: "/shop" });
const themeProviderProps = {
defaultButtonVariant: "expand-hover" as const,
defaultTextAnimation: "background-highlight" as const,
borderRadius: "pill" as const,
contentWidth: "compact" as const,
sizing: "largeSmallSizeLargeTitles" as const,
background: "circleGradient" as const,
cardStyle: "gradient-radial" as const,
primaryButtonStyle: "double-inset" as const,
secondaryButtonStyle: "layered" as const,
headingFontWeight: "light" as const
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: [
brandName: "No song", navItems: [
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" }
],
button: { text: "Cart", onClick: () => console.log("Cart button clicked") }
{ 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 products...</p>
</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="flex flex-col items-center justify-center min-h-screen py-20 px-4">
<div className="text-center">
<h1 className="text-4xl font-bold">Shop</h1>
<p className="mt-4 text-lg text-foreground/80">Our collection of premium instruments will be available here soon.</p>
</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>
</ReactLenis>
</main>
</ThemeProvider>
);
}
@@ -81,4 +39,4 @@ export default function ShopPage() {
<ShopPageContent />
</Suspense>
);
}
}