Update src/app/shop/page.tsx
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user