bender/e1be0852-5b06-401b-a3b9-f78822db4053
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/shop/[id]/page.tsx

Browse Source
This commit is contained in:
bender
2026-02-22 12:20:19 +00:00
parent 88b7ba86cd
commit 5429eb2724
1 changed files with 114 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

171
src/app/shop/[id]/page.tsx
View File

@@ -77,41 +77,60 @@ function ProductPageContent({ params }: ProductPageProps) {
if (isLoading) {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="large"
background="aurora"
cardStyle="inset"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
sizing="mediumLarge"
background="fluid"
cardStyle="soft-shadow"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarStyleApple
brandName="Hookah Haven"
brandName="MyCo"
navItems={[
{ name: "Головна", id: "/" },
{ name: "Магазин", id: "/shop" }
{ name: "Home", id: "/" },
{ name: "About", id: "/#about" },
{ name: "Features", id: "/#features" },
{ name: "Products", id: "/#products" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
{ name: "Blog", id: "/blog" },
{ name: "Shop", id: "/shop" }
]}
button={{ text: "Кошик", onClick: () => setCartOpen(true) }}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/>
</div>
<main className="min-h-screen flex items-center justify-center pt-20">
<div id="loading-indicator" data-section="loading-indicator">
<p className="text-foreground">Завантаження товару...</p>
<p className="text-foreground">Loading product...</p>
</div>
</main>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Hookah Haven"
logoText="MyCo"
columns={[
{ title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
{ title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] }
{
title: "Solutions", items: [
{ label: "Products", href: "/#products" },
{ label: "Features", href: "/#features" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Blog", href: "/blog" },
{ label: "FAQ", href: "/#faq" },
{ label: "Contact", href: "/#contact" }
]
}
]}
copyrightText="© 2024 Hookah Haven. Всі права захищені."
copyrightText="© 2024 MyCo. All rights reserved."
/>
</div>
</ReactLenis>
@@ -122,47 +141,66 @@ function ProductPageContent({ params }: ProductPageProps) {
if (!product) {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="large"
background="aurora"
cardStyle="inset"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
sizing="mediumLarge"
background="fluid"
cardStyle="soft-shadow"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarStyleApple
brandName="Hookah Haven"
brandName="MyCo"
navItems={[
{ name: "Головна", id: "/" },
{ name: "Магазин", id: "/shop" }
{ name: "Home", id: "/" },
{ name: "About", id: "/#about" },
{ name: "Features", id: "/#features" },
{ name: "Products", id: "/#products" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
{ name: "Blog", id: "/blog" },
{ name: "Shop", id: "/shop" }
]}
button={{ text: "Кошик", onClick: () => setCartOpen(true) }}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/>
</div>
<main className="min-h-screen flex items-center justify-center pt-20">
<div id="not-found" data-section="not-found" className="text-center">
<p className="text-foreground mb-4">Товар не знайдено</p>
<p className="text-foreground mb-4">Product not found</p>
<button
onClick={() => router.push("/shop")}
className="primary-button px-6 py-2 rounded-theme text-primary-cta-text"
>
Повернутися до магазину
Back to Shop
</button>
</div>
</main>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Hookah Haven"
logoText="MyCo"
columns={[
{ title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
{ title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] }
{
title: "Solutions", items: [
{ label: "Products", href: "/#products" },
{ label: "Features", href: "/#features" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Blog", href: "/blog" },
{ label: "FAQ", href: "/#faq" },
{ label: "Contact", href: "/#contact" }
]
}
]}
copyrightText="© 2024 Hookah Haven. Всі права захищені."
copyrightText="© 2024 MyCo. All rights reserved."
/>
</div>
</ReactLenis>
@@ -172,26 +210,33 @@ function ProductPageContent({ params }: ProductPageProps) {
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
defaultButtonVariant="elastic-effect"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="large"
background="aurora"
cardStyle="inset"
primaryButtonStyle="primary-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="light"
sizing="mediumLarge"
background="fluid"
cardStyle="soft-shadow"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="bold"
>
<ReactLenis root>
<div id="navbar" data-section="navbar">
<NavbarStyleApple
brandName="Hookah Haven"
brandName="MyCo"
navItems={[
{ name: "Головна", id: "/" },
{ name: "Магазин", id: "/shop" }
{ name: "Home", id: "/" },
{ name: "About", id: "/#about" },
{ name: "Features", id: "/#features" },
{ name: "Products", id: "/#products" },
{ name: "Testimonials", id: "/#testimonials" },
{ name: "FAQ", id: "/#faq" },
{ name: "Contact", id: "/#contact" },
{ name: "Blog", id: "/blog" },
{ name: "Shop", id: "/shop" }
]}
button={{ text: "Кошик", onClick: () => setCartOpen(true) }}
button={{ text: "Cart", onClick: () => setCartOpen(true) }}
/>
</div>
<div id="product-detail-card" data-section="product-detail-card">
@@ -210,8 +255,8 @@ function ProductPageContent({ params }: ProductPageProps) {
inventoryQuantity={meta.inventoryQuantity}
sku={meta.sku}
buttons={[
{ text: "Додати до кошика", onClick: handleAddToCart },
{ text: "Купити зараз", onClick: handleBuyNow }
{ text: "Add to Cart", onClick: handleAddToCart },
{ text: "Buy Now", onClick: handleBuyNow }
]}
/>
</div>
@@ -225,19 +270,31 @@ function ProductPageContent({ params }: ProductPageProps) {
total={`$${cartTotal}`}
buttons={[
{
text: isCheckoutLoading ? "Обробка..." : "Оформити замовлення", onClick: handleCheckout,
text: isCheckoutLoading ? "Processing..." : "Checkout", onClick: handleCheckout,
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterBaseCard
logoText="Hookah Haven"
logoText="MyCo"
columns={[
{ title: "Магазин", items: [{ label: "Кальяни", href: "#products" }, { label: "Тютюн", href: "#products" }, { label: "Вугілля", href: "#products" }, { label: "Аксесуари", href: "#products" }] },
{ title: "Компанія", items: [{ label: "Про нас", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Контакти", href: "#contact" }] }
{
title: "Solutions", items: [
{ label: "Products", href: "/#products" },
{ label: "Features", href: "/#features" }
]
},
{
title: "Company", items: [
{ label: "About Us", href: "/#about" },
{ label: "Blog", href: "/blog" },
{ label: "FAQ", href: "/#faq" },
{ label: "Contact", href: "/#contact" }
]
}
]}
copyrightText="© 2024 Hookah Haven. Всі права захищені."
copyrightText="© 2024 MyCo. All rights reserved."
/>
</div>
</ReactLenis>