Update src/app/shop/page.tsx
This commit is contained in:
@@ -1,11 +1,33 @@
|
||||
"use client";
|
||||
|
||||
import ReactLenis from "lenis/react";
|
||||
import Link from "next/link";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
|
||||
import { useProductCatalog } from "@/hooks/useProductCatalog";
|
||||
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Menu", id: "/menu" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
|
||||
const Footer = () => (
|
||||
<footer className="py-8 bg-card border-t">
|
||||
<div className="container mx-auto px-4 md:px-6 flex flex-col md:flex-row justify-between items-center">
|
||||
<p className="text-foreground/80 text-sm mb-4 md:mb-0">{`© ${new Date().getFullYear()} Brew Haven. All rights reserved.`}</p>
|
||||
<nav className="flex gap-4">
|
||||
{navItems.map((item) => (
|
||||
<Link key={item.name} href={item.id} className="text-sm text-foreground hover:text-[var(--primary-cta)] transition-colors">
|
||||
{item.name}
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
export default function ShopPage() {
|
||||
const {
|
||||
products,
|
||||
@@ -29,22 +51,21 @@ export default function ShopPage() {
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Brew Haven"
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
button={{ text: "Cart", onClick: () => {} }}
|
||||
buttonClassName="shadow-md"
|
||||
logoHref="#"
|
||||
/>
|
||||
</div>
|
||||
<div id="loading-section" data-section="loading-section">
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<p className="text-foreground">Loading products...</p>
|
||||
</main>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Brew Haven"
|
||||
navItems={navItems}
|
||||
button={{ text: "Cart", onClick: () => {} }}
|
||||
buttonClassName="shadow-md"
|
||||
logoHref="/"
|
||||
/>
|
||||
</div>
|
||||
<div id="loading-section" data-section="loading-section">
|
||||
<main className="min-h-screen flex items-center justify-center pt-20">
|
||||
<p className="text-foreground">Loading products...</p>
|
||||
</main>
|
||||
</div>
|
||||
<Footer />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -62,28 +83,27 @@ export default function ShopPage() {
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="navbar" data-section="navbar">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Brew Haven"
|
||||
navItems={[{ name: "Home", id: "/" }, { name: "Shop", id: "/shop" }]}
|
||||
button={{ text: "Cart", onClick: () => {} }}
|
||||
buttonClassName="shadow-md"
|
||||
logoHref="#"
|
||||
/>
|
||||
</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>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
brandName="Brew Haven"
|
||||
navItems={navItems}
|
||||
button={{ text: "Cart", onClick: () => {} }}
|
||||
buttonClassName="shadow-md"
|
||||
logoHref="/"
|
||||
/>
|
||||
</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>
|
||||
<Footer />
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user