From c3f30e8105f0e832458f7bc3677086a97b4a1c73 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 03:56:31 +0000 Subject: [PATCH 01/10] Update src/components/cardStack/CardStack.tsx --- src/components/cardStack/CardStack.tsx | 259 ++++--------------------- 1 file changed, 36 insertions(+), 223 deletions(-) diff --git a/src/components/cardStack/CardStack.tsx b/src/components/cardStack/CardStack.tsx index 3003a8a..c58334e 100644 --- a/src/components/cardStack/CardStack.tsx +++ b/src/components/cardStack/CardStack.tsx @@ -1,229 +1,42 @@ -"use client"; +'use client'; -import { memo, Children } from "react"; -import { CardStackProps } from "./types"; -import GridLayout from "./layouts/grid/GridLayout"; -import AutoCarousel from "./layouts/carousels/AutoCarousel"; -import ButtonCarousel from "./layouts/carousels/ButtonCarousel"; -import TimelineBase from "./layouts/timelines/TimelineBase"; -import { gridConfigs } from "./layouts/grid/gridConfigs"; +import React, { useState } from 'react'; +import TimelineBase from './layouts/timelines/TimelineBase'; -const CardStack = ({ - children, - mode = "buttons", - gridVariant = "uniform-all-items-equal", - uniformGridCustomHeightClasses, - gridRowsClassName, - itemHeightClassesOverride, - animationType, - supports3DAnimation = false, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout = "default", - useInvertedBackground, - carouselThreshold = 5, - bottomContent, - className = "", - containerClassName = "", - gridClassName = "", - carouselClassName = "", - carouselItemClassName = "", - controlsClassName = "", - textBoxClassName = "", - titleClassName = "", - titleImageWrapperClassName = "", - titleImageClassName = "", - descriptionClassName = "", - tagClassName = "", - buttonContainerClassName = "", - buttonClassName = "", - buttonTextClassName = "", - ariaLabel = "Card stack", -}: CardStackProps) => { - const childrenArray = Children.toArray(children); - const itemCount = childrenArray.length; +interface TimelineItem { + id: string; + title: string; + description: string; + icon?: React.ReactNode; +} - // Check if the current grid config has gridRows defined - const gridConfig = gridConfigs[gridVariant]?.[itemCount]; - const hasFixedGridRows = gridConfig && 'gridRows' in gridConfig && gridConfig.gridRows; +interface CardStackProps { + items: TimelineItem[]; + className?: string; + itemClassName?: string; + connectorClassName?: string; + contentClassName?: string; + ariaLabel?: string; +} - // If grid has fixed row heights and we have uniformGridCustomHeightClasses, - // we need to use min-h-0 on md+ to prevent conflicts - let adjustedHeightClasses = uniformGridCustomHeightClasses; - if (hasFixedGridRows && uniformGridCustomHeightClasses) { - // Extract the mobile min-height and add md:min-h-0 - const mobileMinHeight = uniformGridCustomHeightClasses.split(' ')[0]; - adjustedHeightClasses = `${mobileMinHeight} md:min-h-0`; - } - - // Timeline layout for zigzag pattern (works best with 3-6 items) - if (gridVariant === "timeline" && itemCount >= 3 && itemCount <= 6) { - // Convert depth-3d to scale-rotate for timeline (doesn't support 3D) - const timelineAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType; - - return ( - - {childrenArray} - - ); - } - - // Use grid for items below threshold, carousel for items at or above threshold - // Timeline with 7+ items will also use carousel - const useCarousel = itemCount >= carouselThreshold || (gridVariant === "timeline" && itemCount > 6); - - // Grid layout for 1-4 items - if (!useCarousel) { - return ( - - {childrenArray} - - ); - } - - // Auto-scroll carousel for 5+ items - if (mode === "auto") { - // Convert depth-3d to scale-rotate for carousel (doesn't support 3D) - const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType; - - return ( - - {childrenArray} - - ); - } - - // Button-controlled carousel for 5+ items - // Convert depth-3d to scale-rotate for carousel (doesn't support 3D) - const carouselAnimationType = animationType === "depth-3d" ? "scale-rotate" : animationType; - - return ( - - {childrenArray} - - ); +const CardStack: React.FC = ({ + items, + className = '', + itemClassName = '', + connectorClassName = '', + contentClassName = '', + ariaLabel = 'Card stack', +}) => { + return ( +
+ +
+ ); }; -CardStack.displayName = "CardStack"; - -export default memo(CardStack); +export default CardStack; \ No newline at end of file -- 2.49.1 From 3150e9055e9398e717e754732d4d725f0ef9afe8 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 03:56:31 +0000 Subject: [PATCH 02/10] Update src/components/cardStack/hooks/useCardAnimation.ts --- .../cardStack/hooks/useCardAnimation.ts | 203 ++---------------- 1 file changed, 23 insertions(+), 180 deletions(-) diff --git a/src/components/cardStack/hooks/useCardAnimation.ts b/src/components/cardStack/hooks/useCardAnimation.ts index 4331477..cc0f8f4 100644 --- a/src/components/cardStack/hooks/useCardAnimation.ts +++ b/src/components/cardStack/hooks/useCardAnimation.ts @@ -1,187 +1,30 @@ -import { useRef } from "react"; -import { useGSAP } from "@gsap/react"; -import gsap from "gsap"; -import { ScrollTrigger } from "gsap/ScrollTrigger"; -import type { CardAnimationType, GridVariant } from "../types"; -import { useDepth3DAnimation } from "./useDepth3DAnimation"; +'use client'; -gsap.registerPlugin(ScrollTrigger); +import { useEffect, useState } from 'react'; +import { useDepth3DAnimation } from './useDepth3DAnimation'; -interface UseCardAnimationProps { - animationType: CardAnimationType | "depth-3d"; - itemCount: number; - isGrid?: boolean; - supports3DAnimation?: boolean; - gridVariant?: GridVariant; - useIndividualTriggers?: boolean; +interface CardAnimationConfig { + duration?: number; + delay?: number; + easing?: string; } -export const useCardAnimation = ({ - animationType, - itemCount, - isGrid = true, - supports3DAnimation = false, - gridVariant, - useIndividualTriggers = false -}: UseCardAnimationProps) => { - const itemRefs = useRef<(HTMLElement | null)[]>([]); - const containerRef = useRef(null); - const perspectiveRef = useRef(null); - const bottomContentRef = useRef(null); +const useCardAnimation = (config: CardAnimationConfig = {}) => { + const { duration = 0.6, delay = 0, easing = 'ease-out' } = config; + const [isAnimating, setIsAnimating] = useState(false); + const { transform } = useDepth3DAnimation({ rotateX: 0, rotateY: 0, scale: 1 }); - // Enable 3D effect only when explicitly supported and conditions are met - const { isMobile } = useDepth3DAnimation({ - itemRefs, - containerRef, - perspectiveRef, - isEnabled: animationType === "depth-3d" && isGrid && supports3DAnimation && gridVariant === "uniform-all-items-equal", - }); + useEffect(() => { + setIsAnimating(true); + }, []); - // Use scale-rotate as fallback when depth-3d conditions aren't met - const effectiveAnimationType = - animationType === "depth-3d" && (isMobile || !isGrid || gridVariant !== "uniform-all-items-equal") - ? "scale-rotate" - : animationType; - - useGSAP(() => { - if (effectiveAnimationType === "none" || effectiveAnimationType === "depth-3d" || itemRefs.current.length === 0) return; - - const items = itemRefs.current.filter((el) => el !== null); - // Include bottomContent in animation if it exists - if (bottomContentRef.current) { - items.push(bottomContentRef.current); - } - - if (effectiveAnimationType === "opacity") { - if (useIndividualTriggers) { - items.forEach((item) => { - gsap.fromTo( - item, - { opacity: 0 }, - { - opacity: 1, - duration: 1.25, - ease: "sine", - scrollTrigger: { - trigger: item, - start: "top 80%", - toggleActions: "play none none none", - }, - } - ); - }); - } else { - gsap.fromTo( - items, - { opacity: 0 }, - { - opacity: 1, - duration: 1.25, - stagger: 0.15, - ease: "sine", - scrollTrigger: { - trigger: items[0], - start: "top 80%", - toggleActions: "play none none none", - }, - } - ); - } - } else if (effectiveAnimationType === "slide-up") { - items.forEach((item, index) => { - gsap.fromTo( - item, - { opacity: 0, yPercent: 15 }, - { - opacity: 1, - yPercent: 0, - duration: 1, - delay: useIndividualTriggers ? 0 : index * 0.15, - ease: "sine", - scrollTrigger: { - trigger: useIndividualTriggers ? item : items[0], - start: "top 80%", - toggleActions: "play none none none", - }, - } - ); - }); - } else if (effectiveAnimationType === "scale-rotate") { - if (useIndividualTriggers) { - items.forEach((item) => { - gsap.fromTo( - item, - { scaleX: 0, rotate: 10 }, - { - scaleX: 1, - rotate: 0, - duration: 1, - ease: "power3", - scrollTrigger: { - trigger: item, - start: "top 80%", - toggleActions: "play none none none", - }, - } - ); - }); - } else { - gsap.fromTo( - items, - { scaleX: 0, rotate: 10 }, - { - scaleX: 1, - rotate: 0, - duration: 1, - stagger: 0.15, - ease: "power3", - scrollTrigger: { - trigger: items[0], - start: "top 80%", - toggleActions: "play none none none", - }, - } - ); - } - } else if (effectiveAnimationType === "blur-reveal") { - if (useIndividualTriggers) { - items.forEach((item) => { - gsap.fromTo( - item, - { opacity: 0, filter: "blur(10px)" }, - { - opacity: 1, - filter: "blur(0px)", - duration: 1.2, - ease: "power2.out", - scrollTrigger: { - trigger: item, - start: "top 80%", - toggleActions: "play none none none", - }, - } - ); - }); - } else { - gsap.fromTo( - items, - { opacity: 0, filter: "blur(10px)" }, - { - opacity: 1, - filter: "blur(0px)", - duration: 1.2, - stagger: 0.15, - ease: "power2.out", - scrollTrigger: { - trigger: items[0], - start: "top 80%", - toggleActions: "play none none none", - }, - } - ); - } - } - }, [effectiveAnimationType, itemCount, useIndividualTriggers]); - - return { itemRefs, containerRef, perspectiveRef, bottomContentRef }; + return { + isAnimating, + transform, + duration, + delay, + easing, + }; }; + +export { useCardAnimation }; \ No newline at end of file -- 2.49.1 From c6343baaf3af417b890f532d19838c2e46d3c5b1 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 03:56:31 +0000 Subject: [PATCH 03/10] Update src/components/cardStack/hooks/useDepth3DAnimation.ts --- src/components/cardStack/hooks/useDepth3DAnimation.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/cardStack/hooks/useDepth3DAnimation.ts b/src/components/cardStack/hooks/useDepth3DAnimation.ts index 775cb0a..0af30fd 100644 --- a/src/components/cardStack/hooks/useDepth3DAnimation.ts +++ b/src/components/cardStack/hooks/useDepth3DAnimation.ts @@ -20,4 +20,4 @@ const useDepth3DAnimation = (config: Depth3DConfig = {}) => { return { transform }; }; -export default useDepth3DAnimation; \ No newline at end of file +export { useDepth3DAnimation }; \ No newline at end of file -- 2.49.1 From 61ab65577189d988c6f7f775f2f20001cc13acd9 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 03:56:32 +0000 Subject: [PATCH 04/10] Update src/components/sections/product/ProductCardFour.tsx --- .../sections/product/ProductCardFour.tsx | 300 ++++++------------ 1 file changed, 101 insertions(+), 199 deletions(-) diff --git a/src/components/sections/product/ProductCardFour.tsx b/src/components/sections/product/ProductCardFour.tsx index 303ff14..9ee92ad 100644 --- a/src/components/sections/product/ProductCardFour.tsx +++ b/src/components/sections/product/ProductCardFour.tsx @@ -1,39 +1,33 @@ -"use client"; +'use client'; -import { memo, useCallback } from "react"; -import { useRouter } from "next/navigation"; -import CardStack from "@/components/cardStack/CardStack"; -import ProductImage from "@/components/shared/ProductImage"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import { useProducts } from "@/hooks/useProducts"; -import type { Product } from "@/lib/api/product"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type ProductCardFourGridVariant = Exclude; - -type ProductCard = Product & { - variant: string; -}; +import React from 'react'; +import Image from 'next/image'; +import { ShoppingCart } from 'lucide-react'; +import { Product } from '@/lib/api/product'; interface ProductCardFourProps { - products?: ProductCard[]; - carouselMode?: "auto" | "buttons"; - gridVariant: ProductCardFourGridVariant; + products?: Array<{ + id: string; + name: string; + price: string; + imageSrc: string; + imageAlt?: string; + onProductClick?: () => void; + }>; + carouselMode?: 'auto' | 'buttons'; + gridVariant: 'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid'; + animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; title: string; - titleSegments?: TitleSegment[]; + titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>; description: string; tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; + tagIcon?: React.ComponentType; + tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + buttons?: Array<{ text: string; onClick?: () => void; href?: string }>; + buttonAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'; + useInvertedBackground: boolean; ariaLabel?: string; className?: string; containerClassName?: string; @@ -45,8 +39,6 @@ interface ProductCardFourProps { textBoxDescriptionClassName?: string; cardNameClassName?: string; cardPriceClassName?: string; - cardVariantClassName?: string; - actionButtonClassName?: string; gridClassName?: string; carouselClassName?: string; controlsClassName?: string; @@ -57,182 +49,92 @@ interface ProductCardFourProps { textBoxButtonTextClassName?: string; } -interface ProductCardItemProps { - product: ProductCard; - shouldUseLightText: boolean; - cardClassName?: string; - imageClassName?: string; - cardNameClassName?: string; - cardPriceClassName?: string; - cardVariantClassName?: string; - actionButtonClassName?: string; -} - -const ProductCardItem = memo(({ - product, - shouldUseLightText, - cardClassName = "", - imageClassName = "", - cardNameClassName = "", - cardPriceClassName = "", - cardVariantClassName = "", - actionButtonClassName = "", -}: ProductCardItemProps) => { - return ( -
- - -
-
-
-

- {product.name} -

-

- {product.variant} -

-
-

- {product.price} -

-
-
-
- ); -}); - -ProductCardItem.displayName = "ProductCardItem"; - -const ProductCardFour = ({ - products: productsProp, - carouselMode = "buttons", +const ProductCardFour: React.FC = ({ + products = [], + carouselMode = 'buttons', gridVariant, - uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105", animationType, + uniformGridCustomHeightClasses = 'min-h-95 2xl:min-h-105', title, - titleSegments, description, tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, + tagIcon: TagIcon, + buttons = [], useInvertedBackground, - ariaLabel = "Product section", - className = "", - containerClassName = "", - cardClassName = "", - imageClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardNameClassName = "", - cardPriceClassName = "", - cardVariantClassName = "", - actionButtonClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: ProductCardFourProps) => { - const theme = useTheme(); - const router = useRouter(); - const { products: fetchedProducts, isLoading } = useProducts(); - const isFromApi = fetchedProducts.length > 0; - const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[]; - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const handleProductClick = useCallback((product: ProductCard) => { - if (isFromApi) { - router.push(`/shop/${product.id}`); - } else { - product.onProductClick?.(); - } - }, [isFromApi, router]); - - - if (isLoading && !productsProp) { - return ( -
-

Loading products...

-
- ); - } - - if (!products || products.length === 0) { - return null; - } - + ariaLabel = 'Product section', + className = '', + containerClassName = '', + cardClassName = '', + imageClassName = '', + cardNameClassName = '', + cardPriceClassName = '', +}) => { return ( - +
+ {/* Header */} +
+

{title}

+

{description}

+ {tag && ( +
+ {TagIcon && } + {tag} +
+ )} +
- title={title} - titleSegments={titleSegments} - description={description} - tag={tag} - tagIcon={tagIcon} - tagAnimation={tagAnimation} - buttons={buttons} - buttonAnimation={buttonAnimation} - textboxLayout={textboxLayout} - useInvertedBackground={useInvertedBackground} - className={className} - containerClassName={containerClassName} - gridClassName={gridClassName} - carouselClassName={carouselClassName} - controlsClassName={controlsClassName} - textBoxClassName={textBoxClassName} - titleClassName={textBoxTitleClassName} - titleImageWrapperClassName={textBoxTitleImageWrapperClassName} - titleImageClassName={textBoxTitleImageClassName} - descriptionClassName={textBoxDescriptionClassName} - tagClassName={textBoxTagClassName} - buttonContainerClassName={textBoxButtonContainerClassName} - buttonClassName={textBoxButtonClassName} - buttonTextClassName={textBoxButtonTextClassName} - ariaLabel={ariaLabel} - > - {products?.map((product, index) => ( - handleProductClick(product) }} - shouldUseLightText={shouldUseLightText} - cardClassName={cardClassName} - imageClassName={imageClassName} - cardNameClassName={cardNameClassName} - cardPriceClassName={cardPriceClassName} - cardVariantClassName={cardVariantClassName} - actionButtonClassName={actionButtonClassName} - /> - ))} - + {/* Product Grid */} +
+ {products.map((product) => ( +
+ {/* Image Container */} +
+ {product.imageAlt + {/* Add to Cart Button */} + +
+ + {/* Product Info */} +
+

{product.name}

+

{product.price}

+
+
+ ))} +
+ + {/* Action Buttons */} + {buttons.length > 0 && ( +
+ {buttons.map((button, idx) => ( + + ))} +
+ )} +
+ ); }; -ProductCardFour.displayName = "ProductCardFour"; - -export default ProductCardFour; +export default ProductCardFour; \ No newline at end of file -- 2.49.1 From 8b08e8efeae1cc6ef0f89cad20379f68f8030909 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 03:56:32 +0000 Subject: [PATCH 05/10] Update src/components/sections/product/ProductCardOne.tsx --- .../sections/product/ProductCardOne.tsx | 362 +++++++----------- 1 file changed, 147 insertions(+), 215 deletions(-) diff --git a/src/components/sections/product/ProductCardOne.tsx b/src/components/sections/product/ProductCardOne.tsx index 15537bc..b1f7c88 100644 --- a/src/components/sections/product/ProductCardOne.tsx +++ b/src/components/sections/product/ProductCardOne.tsx @@ -1,226 +1,158 @@ -"use client"; +'use client'; -import { memo, useCallback } from "react"; -import { useRouter } from "next/navigation"; -import { ArrowUpRight } from "lucide-react"; -import CardStack from "@/components/cardStack/CardStack"; -import ProductImage from "@/components/shared/ProductImage"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import { useProducts } from "@/hooks/useProducts"; -import type { Product } from "@/lib/api/product"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type ProductCardOneGridVariant = Exclude; - -type ProductCard = Product; +import React from 'react'; +import Image from 'next/image'; +import { Heart, ArrowRight } from 'lucide-react'; +import { Product } from '@/lib/api/product'; interface ProductCardOneProps { - products?: ProductCard[]; - carouselMode?: "auto" | "buttons"; - gridVariant: ProductCardOneGridVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - imageClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - cardNameClassName?: string; - cardPriceClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + products?: Array<{ + id: string; + name: string; + price: string; + imageSrc: string; + imageAlt?: string; + onFavorite?: () => void; + onProductClick?: () => void; + isFavorited?: boolean; + }>; + carouselMode?: 'auto' | 'buttons'; + gridVariant: 'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid'; + animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; + uniformGridCustomHeightClasses?: string; + title: string; + titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>; + description: string; + tag?: string; + tagIcon?: React.ComponentType; + tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + buttons?: Array<{ text: string; onClick?: () => void; href?: string }>; + buttonAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'; + useInvertedBackground: boolean; + ariaLabel?: string; + className?: string; + containerClassName?: string; + cardClassName?: string; + imageClassName?: string; + textBoxTitleClassName?: string; + textBoxTitleImageWrapperClassName?: string; + textBoxTitleImageClassName?: string; + textBoxDescriptionClassName?: string; + cardNameClassName?: string; + cardPriceClassName?: string; + gridClassName?: string; + carouselClassName?: string; + controlsClassName?: string; + textBoxClassName?: string; + textBoxTagClassName?: string; + textBoxButtonContainerClassName?: string; + textBoxButtonClassName?: string; + textBoxButtonTextClassName?: string; } -interface ProductCardItemProps { - product: ProductCard; - shouldUseLightText: boolean; - cardClassName?: string; - imageClassName?: string; - cardNameClassName?: string; - cardPriceClassName?: string; -} - -const ProductCardItem = memo(({ - product, - shouldUseLightText, - cardClassName = "", - imageClassName = "", - cardNameClassName = "", - cardPriceClassName = "", -}: ProductCardItemProps) => { - return ( -
- - -
-
-

- {product.name} -

-

- {product.price} -

-
- - +const ProductCardOne: React.FC = ({ + products = [], + carouselMode = 'buttons', + gridVariant, + animationType, + uniformGridCustomHeightClasses = 'min-h-95 2xl:min-h-105', + title, + description, + tag, + tagIcon: TagIcon, + buttons = [], + useInvertedBackground, + ariaLabel = 'Product section', + className = '', + containerClassName = '', + cardClassName = '', + imageClassName = '', + cardNameClassName = '', + cardPriceClassName = '', +}) => { + return ( +
+
+ {/* Header */} +
+

{title}

+

{description}

+ {tag && ( +
+ {TagIcon && } + {tag}
-
- ); -}); + )} + -ProductCardItem.displayName = "ProductCardItem"; - -const ProductCardOne = ({ - products: productsProp, - carouselMode = "buttons", - gridVariant, - uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Product section", - className = "", - containerClassName = "", - cardClassName = "", - imageClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardNameClassName = "", - cardPriceClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: ProductCardOneProps) => { - const theme = useTheme(); - const router = useRouter(); - const { products: fetchedProducts, isLoading } = useProducts(); - const isFromApi = fetchedProducts.length > 0; - const products = isFromApi ? fetchedProducts : productsProp; - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const handleProductClick = useCallback((product: ProductCard) => { - if (isFromApi) { - router.push(`/shop/${product.id}`); - } else { - product.onProductClick?.(); - } - }, [isFromApi, router]); - - if (isLoading && !productsProp) { - return ( -
-

Loading products...

-
- ); - } - - if (!products || products.length === 0) { - return null; - } - - return ( - - {products?.map((product, index) => ( - handleProductClick(product) }} - shouldUseLightText={shouldUseLightText} - cardClassName={cardClassName} - imageClassName={imageClassName} - cardNameClassName={cardNameClassName} - cardPriceClassName={cardPriceClassName} + {/* Product Grid */} +
+ {products.map((product) => ( +
+ {/* Image Container */} +
+ {product.imageAlt + {/* Favorite Button */} + +
+ + {/* Product Info */} +
+
+

{product.name}

+

{product.price}

+
+ {/* Arrow Icon Button */} + +
+
+ ))} +
+ + {/* Action Buttons */} + {buttons.length > 0 && ( +
+ {buttons.map((button, idx) => ( + ))} - - ); +
+ )} + + + ); }; -ProductCardOne.displayName = "ProductCardOne"; - -export default ProductCardOne; +export default ProductCardOne; \ No newline at end of file -- 2.49.1 From 553b656a1353cb6c309e67422165403246249786 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 03:56:33 +0000 Subject: [PATCH 06/10] Update src/components/sections/product/ProductCardThree.tsx --- .../sections/product/ProductCardThree.tsx | 410 ++++++------------ 1 file changed, 138 insertions(+), 272 deletions(-) diff --git a/src/components/sections/product/ProductCardThree.tsx b/src/components/sections/product/ProductCardThree.tsx index f53d136..e4bebb5 100644 --- a/src/components/sections/product/ProductCardThree.tsx +++ b/src/components/sections/product/ProductCardThree.tsx @@ -1,283 +1,149 @@ -"use client"; +'use client'; -import { memo, useState, useCallback } from "react"; -import { useRouter } from "next/navigation"; -import { Plus, Minus } from "lucide-react"; -import CardStack from "@/components/cardStack/CardStack"; -import ProductImage from "@/components/shared/ProductImage"; -import QuantityButton from "@/components/shared/QuantityButton"; -import Button from "@/components/button/Button"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import { useProducts } from "@/hooks/useProducts"; -import { getButtonProps } from "@/lib/buttonUtils"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import type { Product } from "@/lib/api/product"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, ButtonAnimationType, GridVariant, CardAnimationType, TitleSegment } from "@/components/cardStack/types"; -import type { CTAButtonVariant, ButtonPropsForVariant } from "@/components/button/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type ProductCardThreeGridVariant = Exclude; - -type ProductCard = Product & { - onQuantityChange?: (quantity: number) => void; - initialQuantity?: number; - priceButtonProps?: Partial>; -}; +import React from 'react'; +import Image from 'next/image'; +import { Heart } from 'lucide-react'; +import { Product } from '@/lib/api/product'; interface ProductCardThreeProps { - products?: ProductCard[]; - carouselMode?: "auto" | "buttons"; - gridVariant: ProductCardThreeGridVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - imageClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - cardNameClassName?: string; - quantityControlsClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + products?: Array<{ + id: string; + name: string; + price: string; + imageSrc: string; + imageAlt?: string; + onFavorite?: () => void; + onProductClick?: () => void; + isFavorited?: boolean; + }>; + carouselMode?: 'auto' | 'buttons'; + gridVariant: 'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid'; + animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; + uniformGridCustomHeightClasses?: string; + title: string; + titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>; + description: string; + tag?: string; + tagIcon?: React.ComponentType; + tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + buttons?: Array<{ text: string; onClick?: () => void; href?: string }>; + buttonAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'; + useInvertedBackground: boolean; + ariaLabel?: string; + className?: string; + containerClassName?: string; + cardClassName?: string; + imageClassName?: string; + textBoxTitleClassName?: string; + textBoxTitleImageWrapperClassName?: string; + textBoxTitleImageClassName?: string; + textBoxDescriptionClassName?: string; + cardNameClassName?: string; + cardPriceClassName?: string; + gridClassName?: string; + carouselClassName?: string; + controlsClassName?: string; + textBoxClassName?: string; + textBoxTagClassName?: string; + textBoxButtonContainerClassName?: string; + textBoxButtonClassName?: string; + textBoxButtonTextClassName?: string; } - -interface ProductCardItemProps { - product: ProductCard; - shouldUseLightText: boolean; - isFromApi: boolean; - onBuyClick?: (productId: string, quantity: number) => void; - cardClassName?: string; - imageClassName?: string; - cardNameClassName?: string; - quantityControlsClassName?: string; -} - -const ProductCardItem = memo(({ - product, - shouldUseLightText, - isFromApi, - onBuyClick, - cardClassName = "", - imageClassName = "", - cardNameClassName = "", - quantityControlsClassName = "", -}: ProductCardItemProps) => { - const theme = useTheme(); - const [quantity, setQuantity] = useState(product.initialQuantity || 1); - - const handleIncrement = useCallback((e: React.MouseEvent) => { - e.stopPropagation(); - const newQuantity = quantity + 1; - setQuantity(newQuantity); - product.onQuantityChange?.(newQuantity); - }, [quantity, product]); - - const handleDecrement = useCallback((e: React.MouseEvent) => { - e.stopPropagation(); - if (quantity > 1) { - const newQuantity = quantity - 1; - setQuantity(newQuantity); - product.onQuantityChange?.(newQuantity); - } - }, [quantity, product]); - - const handleClick = useCallback(() => { - if (isFromApi && onBuyClick) { - onBuyClick(product.id, quantity); - } else { - product.onProductClick?.(); - } - }, [isFromApi, onBuyClick, product, quantity]); - - return ( -
- - -
-

- {product.name} -

- -
-
- - - {quantity} - - -
- -
+const ProductCardThree: React.FC = ({ + products = [], + carouselMode = 'buttons', + gridVariant, + animationType, + uniformGridCustomHeightClasses = 'min-h-95 2xl:min-h-105', + title, + description, + tag, + tagIcon: TagIcon, + buttons = [], + useInvertedBackground, + ariaLabel = 'Product section', + className = '', + containerClassName = '', + cardClassName = '', + imageClassName = '', + cardNameClassName = '', + cardPriceClassName = '', +}) => { + return ( +
+
+ {/* Header */} +
+

{title}

+

{description}

+ {tag && ( +
+ {TagIcon && } + {tag}
-
- ); -}); + )} + -ProductCardItem.displayName = "ProductCardItem"; - -const ProductCardThree = ({ - products: productsProp, - carouselMode = "buttons", - gridVariant, - uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Product section", - className = "", - containerClassName = "", - cardClassName = "", - imageClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardNameClassName = "", - quantityControlsClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: ProductCardThreeProps) => { - const theme = useTheme(); - const router = useRouter(); - const { products: fetchedProducts, isLoading } = useProducts(); - const isFromApi = fetchedProducts.length > 0; - const products = (isFromApi ? fetchedProducts : productsProp) as ProductCard[]; - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const handleProductClick = useCallback((product: ProductCard) => { - if (isFromApi) { - router.push(`/shop/${product.id}`); - } else { - product.onProductClick?.(); - } - }, [isFromApi, router]); - - if (isLoading && !productsProp) { - return ( -
-

Loading products...

-
- ); - } - - if (!products || products.length === 0) { - return null; - } - - return ( - - {products?.map((product, index) => ( - handleProductClick(product) }} - shouldUseLightText={shouldUseLightText} - isFromApi={isFromApi} - cardClassName={cardClassName} - imageClassName={imageClassName} - cardNameClassName={cardNameClassName} - quantityControlsClassName={quantityControlsClassName} + {/* Product Grid */} +
+ {products.map((product) => ( +
+ {/* Image Container */} +
+ {product.imageAlt + {/* Favorite Button */} + +
+ + {/* Product Info */} +
+

{product.name}

+

{product.price}

+
+
+ ))} +
+ + {/* Action Buttons */} + {buttons.length > 0 && ( +
+ {buttons.map((button, idx) => ( + ))} - - ); +
+ )} + + + ); }; -ProductCardThree.displayName = "ProductCardThree"; - -export default ProductCardThree; +export default ProductCardThree; \ No newline at end of file -- 2.49.1 From 56f56965ee192d56a9d62a2c072347989f5bd553 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 03:56:33 +0000 Subject: [PATCH 07/10] Update src/components/sections/product/ProductCardTwo.tsx --- .../sections/product/ProductCardTwo.tsx | 419 +++++++----------- 1 file changed, 163 insertions(+), 256 deletions(-) diff --git a/src/components/sections/product/ProductCardTwo.tsx b/src/components/sections/product/ProductCardTwo.tsx index fe4a562..376d0c5 100644 --- a/src/components/sections/product/ProductCardTwo.tsx +++ b/src/components/sections/product/ProductCardTwo.tsx @@ -1,267 +1,174 @@ -"use client"; +'use client'; -import { memo, useCallback } from "react"; -import { useRouter } from "next/navigation"; -import { Star } from "lucide-react"; -import CardStack from "@/components/cardStack/CardStack"; -import ProductImage from "@/components/shared/ProductImage"; -import { cls, shouldUseInvertedText } from "@/lib/utils"; -import { useTheme } from "@/providers/themeProvider/ThemeProvider"; -import { useProducts } from "@/hooks/useProducts"; -import type { Product } from "@/lib/api/product"; -import type { LucideIcon } from "lucide-react"; -import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment, ButtonAnimationType } from "@/components/cardStack/types"; -import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants"; - -type ProductCardTwoGridVariant = Exclude; - -type ProductCard = Product & { - brand: string; - rating: number; - reviewCount: string; -}; +import React from 'react'; +import Image from 'next/image'; +import { Heart, ArrowRight, Star } from 'lucide-react'; +import { Product } from '@/lib/api/product'; interface ProductCardTwoProps { - products?: ProductCard[]; - carouselMode?: "auto" | "buttons"; - gridVariant: ProductCardTwoGridVariant; - uniformGridCustomHeightClasses?: string; - animationType: CardAnimationType; - title: string; - titleSegments?: TitleSegment[]; - description: string; - tag?: string; - tagIcon?: LucideIcon; - tagAnimation?: ButtonAnimationType; - buttons?: ButtonConfig[]; - buttonAnimation?: ButtonAnimationType; - textboxLayout: TextboxLayout; - useInvertedBackground: InvertedBackground; - ariaLabel?: string; - className?: string; - containerClassName?: string; - cardClassName?: string; - imageClassName?: string; - textBoxTitleClassName?: string; - textBoxTitleImageWrapperClassName?: string; - textBoxTitleImageClassName?: string; - textBoxDescriptionClassName?: string; - cardBrandClassName?: string; - cardNameClassName?: string; - cardPriceClassName?: string; - cardRatingClassName?: string; - actionButtonClassName?: string; - gridClassName?: string; - carouselClassName?: string; - controlsClassName?: string; - textBoxClassName?: string; - textBoxTagClassName?: string; - textBoxButtonContainerClassName?: string; - textBoxButtonClassName?: string; - textBoxButtonTextClassName?: string; + products?: Array<{ + id: string; + brand: string; + name: string; + price: string; + rating: number; + reviewCount: string; + imageSrc: string; + imageAlt?: string; + onFavorite?: () => void; + onProductClick?: () => void; + isFavorited?: boolean; + }>; + carouselMode?: 'auto' | 'buttons'; + gridVariant: 'uniform-all-items-equal' | 'bento-grid' | 'bento-grid-inverted' | 'two-columns-alternating-heights' | 'asymmetric-60-wide-40-narrow' | 'three-columns-all-equal-width' | 'four-items-2x2-equal-grid'; + animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; + uniformGridCustomHeightClasses?: string; + title: string; + titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>; + description: string; + tag?: string; + tagIcon?: React.ComponentType; + tagAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + buttons?: Array<{ text: string; onClick?: () => void; href?: string }>; + buttonAnimation?: 'none' | 'opacity' | 'slide-up' | 'blur-reveal'; + textboxLayout: 'default' | 'split' | 'split-actions' | 'split-description' | 'inline-image'; + useInvertedBackground: boolean; + ariaLabel?: string; + className?: string; + containerClassName?: string; + cardClassName?: string; + imageClassName?: string; + textBoxTitleClassName?: string; + textBoxTitleImageWrapperClassName?: string; + textBoxTitleImageClassName?: string; + textBoxDescriptionClassName?: string; + cardBrandClassName?: string; + cardNameClassName?: string; + cardPriceClassName?: string; + cardRatingClassName?: string; + actionButtonClassName?: string; + gridClassName?: string; + carouselClassName?: string; + controlsClassName?: string; + textBoxClassName?: string; + textBoxTagClassName?: string; + textBoxButtonContainerClassName?: string; + textBoxButtonClassName?: string; + textBoxButtonTextClassName?: string; } -interface ProductCardItemProps { - product: ProductCard; - shouldUseLightText: boolean; - cardClassName?: string; - imageClassName?: string; - cardBrandClassName?: string; - cardNameClassName?: string; - cardPriceClassName?: string; - cardRatingClassName?: string; - actionButtonClassName?: string; -} - -const ProductCardItem = memo(({ - product, - shouldUseLightText, - cardClassName = "", - imageClassName = "", - cardBrandClassName = "", - cardNameClassName = "", - cardPriceClassName = "", - cardRatingClassName = "", - actionButtonClassName = "", -}: ProductCardItemProps) => { - return ( -
- - -
-

- {product.brand} -

-
-

- {product.name} -

-
-
- {[...Array(5)].map((_, i) => ( - - ))} -
- - ({product.reviewCount}) - -
-
-

- {product.price} -

+const ProductCardTwo: React.FC = ({ + products = [], + carouselMode = 'buttons', + gridVariant, + animationType, + uniformGridCustomHeightClasses = 'min-h-95 2xl:min-h-105', + title, + description, + tag, + tagIcon: TagIcon, + buttons = [], + useInvertedBackground, + ariaLabel = 'Product section', + className = '', + containerClassName = '', + cardClassName = '', + imageClassName = '', + cardBrandClassName = '', + cardNameClassName = '', + cardPriceClassName = '', + cardRatingClassName = '', +}) => { + return ( +
+
+ {/* Header */} +
+

{title}

+

{description}

+ {tag && ( +
+ {TagIcon && } + {tag}
-
- ); -}); + )} + -ProductCardItem.displayName = "ProductCardItem"; - -const ProductCardTwo = ({ - products: productsProp, - carouselMode = "buttons", - gridVariant, - uniformGridCustomHeightClasses = "min-h-95 2xl:min-h-105", - animationType, - title, - titleSegments, - description, - tag, - tagIcon, - tagAnimation, - buttons, - buttonAnimation, - textboxLayout, - useInvertedBackground, - ariaLabel = "Product section", - className = "", - containerClassName = "", - cardClassName = "", - imageClassName = "", - textBoxTitleClassName = "", - textBoxTitleImageWrapperClassName = "", - textBoxTitleImageClassName = "", - textBoxDescriptionClassName = "", - cardBrandClassName = "", - cardNameClassName = "", - cardPriceClassName = "", - cardRatingClassName = "", - actionButtonClassName = "", - gridClassName = "", - carouselClassName = "", - controlsClassName = "", - textBoxClassName = "", - textBoxTagClassName = "", - textBoxButtonContainerClassName = "", - textBoxButtonClassName = "", - textBoxButtonTextClassName = "", -}: ProductCardTwoProps) => { - const theme = useTheme(); - const router = useRouter(); - const { products: fetchedProducts, isLoading } = useProducts(); - const isFromApi = fetchedProducts.length > 0; - const products = (fetchedProducts.length > 0 ? fetchedProducts : productsProp) as ProductCard[]; - const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle); - - const handleProductClick = useCallback((product: ProductCard) => { - if (isFromApi) { - router.push(`/shop/${product.id}`); - } else { - product.onProductClick?.(); - } - }, [isFromApi, router]); - - const customGridRows = (gridVariant === "bento-grid" || gridVariant === "bento-grid-inverted") - ? "md:grid-rows-[22rem_22rem] 2xl:grid-rows-[26rem_26rem]" - : undefined; - - if (isLoading && !productsProp) { - return ( -
-

Loading products...

-
- ); - } - - if (!products || products.length === 0) { - return null; - } - - return ( - - {products?.map((product, index) => ( - handleProductClick(product) }} - shouldUseLightText={shouldUseLightText} - cardClassName={cardClassName} - imageClassName={imageClassName} - cardBrandClassName={cardBrandClassName} - cardNameClassName={cardNameClassName} - cardPriceClassName={cardPriceClassName} - cardRatingClassName={cardRatingClassName} - actionButtonClassName={actionButtonClassName} + {/* Product Grid */} +
+ {products.map((product) => ( +
+ {/* Image Container */} +
+ {product.imageAlt + {/* Favorite Button */} + +
+ + {/* Product Info */} +
+

+ {product.brand} +

+

{product.name}

+
+
+ {[...Array(5)].map((_, i) => ( + + ))} +
+ + ({product.reviewCount}) + +
+

{product.price}

+
+
+ ))} +
+ + {/* Action Buttons */} + {buttons.length > 0 && ( +
+ {buttons.map((button, idx) => ( + ))} - - ); +
+ )} + + + ); }; -ProductCardTwo.displayName = "ProductCardTwo"; - -export default ProductCardTwo; +export default ProductCardTwo; \ No newline at end of file -- 2.49.1 From 00a0ffe97987754a86dc78b84343838b34442ea6 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 03:56:34 +0000 Subject: [PATCH 08/10] Update src/hooks/useProduct.ts --- src/hooks/useProduct.ts | 63 ++++++++++++++++------------------------- 1 file changed, 25 insertions(+), 38 deletions(-) diff --git a/src/hooks/useProduct.ts b/src/hooks/useProduct.ts index 3407f3a..05ee0da 100644 --- a/src/hooks/useProduct.ts +++ b/src/hooks/useProduct.ts @@ -1,45 +1,32 @@ -"use client"; +'use client'; -import { useEffect, useState } from "react"; -import { Product, fetchProduct } from "@/lib/api/product"; +import { useState, useEffect } from 'react'; +import { fetchProductById, Product } from '@/lib/api/product'; -export function useProduct(productId: string) { - const [product, setProduct] = useState(null); - const [isLoading, setIsLoading] = useState(true); - const [error, setError] = useState(null); +const useProduct = (productId?: string) => { + const [product, setProduct] = useState(null); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); - useEffect(() => { - let isMounted = true; + useEffect(() => { + if (!productId) return; - async function loadProduct() { - if (!productId) { - setIsLoading(false); - return; - } + const loadProduct = async () => { + setLoading(true); + setError(null); + const response = await fetchProductById(productId); + if (response.success && response.data) { + setProduct(response.data); + } else { + setError(response.message || 'Failed to fetch product'); + } + setLoading(false); + }; - try { - setIsLoading(true); - const data = await fetchProduct(productId); - if (isMounted) { - setProduct(data); - } - } catch (err) { - if (isMounted) { - setError(err instanceof Error ? err : new Error("Failed to fetch product")); - } - } finally { - if (isMounted) { - setIsLoading(false); - } - } - } + loadProduct(); + }, [productId]); - loadProduct(); + return { product, loading, error }; +}; - return () => { - isMounted = false; - }; - }, [productId]); - - return { product, isLoading, error }; -} +export default useProduct; \ No newline at end of file -- 2.49.1 From d934b71aa8334555292c9488f35513d59d072821 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 03:56:34 +0000 Subject: [PATCH 09/10] Update src/hooks/useProducts.ts --- src/hooks/useProducts.ts | 57 +++++++++++++++++----------------------- 1 file changed, 24 insertions(+), 33 deletions(-) diff --git a/src/hooks/useProducts.ts b/src/hooks/useProducts.ts index 53609fa..07af22b 100644 --- a/src/hooks/useProducts.ts +++ b/src/hooks/useProducts.ts @@ -1,39 +1,30 @@ -"use client"; +'use client'; -import { useEffect, useState } from "react"; -import { Product, fetchProducts } from "@/lib/api/product"; +import { useState, useEffect } from 'react'; +import { fetchProducts, Product } from '@/lib/api/product'; -export function useProducts() { - const [products, setProducts] = useState([]); - const [isLoading, setIsLoading] = useState(true); - const [error, setError] = useState(null); +const useProducts = () => { + const [products, setProducts] = useState([]); + const [loading, setLoading] = useState(false); + const [error, setError] = useState(null); - useEffect(() => { - let isMounted = true; + useEffect(() => { + const loadProducts = async () => { + setLoading(true); + setError(null); + const response = await fetchProducts(); + if (response.success && response.data) { + setProducts(response.data); + } else { + setError(response.message || 'Failed to fetch products'); + } + setLoading(false); + }; - async function loadProducts() { - try { - const data = await fetchProducts(); - if (isMounted) { - setProducts(data); - } - } catch (err) { - if (isMounted) { - setError(err instanceof Error ? err : new Error("Failed to fetch products")); - } - } finally { - if (isMounted) { - setIsLoading(false); - } - } - } + loadProducts(); + }, []); - loadProducts(); + return { products, loading, error }; +}; - return () => { - isMounted = false; - }; - }, []); - - return { products, isLoading, error }; -} +export default useProducts; \ No newline at end of file -- 2.49.1 From 89d9670e27caffec1b40f1dc5e2a438b3c2cc108 Mon Sep 17 00:00:00 2001 From: bender Date: Thu, 12 Mar 2026 03:56:34 +0000 Subject: [PATCH 10/10] Update src/lib/api/product.ts --- src/lib/api/product.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/api/product.ts b/src/lib/api/product.ts index 30fba03..072ad52 100644 --- a/src/lib/api/product.ts +++ b/src/lib/api/product.ts @@ -1,6 +1,6 @@ 'use client'; -interface Product { +export interface Product { id: string; name: string; price: number; -- 2.49.1