development/17495972-8795-4363-89b0-09b20bc644e6
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
DK
2026-02-07 20:01:45 +00:00
commit 596d6cbe5d
656 changed files with 77472 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/app/shop/page.tsx Normal file
View File

@@ -0,0 +1,198 @@
"use client";
import ReactLenis from "lenis/react";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import ProductCatalog from "@/components/ecommerce/productCatalog/ProductCatalog";
import { useProductCatalog } from "@/hooks/useProductCatalog";
import { useState } from "react";
import ProductCart from "@/components/ecommerce/cart/ProductCart";
import { useCart } from "@/hooks/useCart";
import { useCheckout } from "@/hooks/useCheckout";
export default function ShopPage() {
const {
products,
isLoading,
search,
setSearch,
filters,
} = useProductCatalog({ basePath: "/shop" });
const {
items: cartItems,
isOpen: cartOpen,
setIsOpen: setCartOpen,
updateQuantity,
removeItem,
total: cartTotal,
getCheckoutItems,
} = useCart();
const { checkout, isLoading: isCheckoutLoading } = useCheckout();
const handleCheckout = async () => {
if (cartItems.length === 0) return;
const currentUrl = new URL(window.location.href);
currentUrl.searchParams.set("success", "true");
await checkout(getCheckoutItems(), { successUrl: currentUrl.toString() });
};
if (isLoading) {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="medium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarStyleApple
brandName="Crimson Seoul"
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>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://img.b2bpic.net/free-photo/high-angle-dining-table-with-cutlery_23-2150312257.jpg"
imageAlt="Crimson Seoul luxury dining atmosphere"
columns={[
{
title: "Dining", items: [
{ label: "Menu", href: "#menu" },
{ label: "Reservations", href: "#contact" },
{ label: "Private Events", href: "#" },
{ label: "Wine Selection", href: "#" }
]
},
{
title: "About", items: [
{ label: "Our Story", href: "#about" },
{ label: "The Chef", href: "#" },
{ label: "Sourcing", href: "#" },
{ label: "Sustainability", href: "#" }
]
},
{
title: "Contact", items: [
{ label: "+82 (0)2 1234 5678", href: "tel:+82212345678" },
{ label: "Gangnam District, Seoul", href: "#" },
{ label: "hello@crimsoneoul.com", href: "mailto:hello@crimsonseoul.com" },
{ label: "Open by Reservation", href: "#" }
]
}
]}
logoText="Crimson Seoul"
copyrightText="© 2024 Crimson Seoul. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="medium"
sizing="mediumLarge"
background="circleGradient"
cardStyle="layered-gradient"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarStyleApple
brandName="Crimson Seoul"
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/high-angle-dining-table-with-cutlery_23-2150312257.jpg"
imageAlt="Crimson Seoul luxury dining atmosphere"
columns={[
{
title: "Dining", items: [
{ label: "Menu", href: "#menu" },
{ label: "Reservations", href: "#contact" },
{ label: "Private Events", href: "#" },
{ label: "Wine Selection", href: "#" }
]
},
{
title: "About", items: [
{ label: "Our Story", href: "#about" },
{ label: "The Chef", href: "#" },
{ label: "Sourcing", href: "#" },
{ label: "Sustainability", href: "#" }
]
},
{
title: "Contact", items: [
{ label: "+82 (0)2 1234 5678", href: "tel:+82212345678" },
{ label: "Gangnam District, Seoul", href: "#" },
{ label: "hello@crimsoneoul.com", href: "mailto:hello@crimsonseoul.com" },
{ label: "Open by Reservation", href: "#" }
]
}
]}
logoText="Crimson Seoul"
copyrightText="© 2024 Crimson Seoul. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}