110 lines
3.8 KiB
TypeScript
110 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
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,
|
|
isLoading,
|
|
search,
|
|
setSearch,
|
|
filters,
|
|
} = useProductCatalog({ basePath: "/shop" });
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLarge"
|
|
background="grid"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<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>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumLarge"
|
|
background="grid"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<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>
|
|
);
|
|
}
|