From 0c037dd6035b11c0c647cef9aee4185c4d360a4d Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 19:07:13 +0000 Subject: [PATCH] Switch to version 1: modified src/components/sections/product/ProductCardFour.tsx --- .../sections/product/ProductCardFour.tsx | 230 ++++++++++++++++-- 1 file changed, 206 insertions(+), 24 deletions(-) diff --git a/src/components/sections/product/ProductCardFour.tsx b/src/components/sections/product/ProductCardFour.tsx index 6ada892..303ff14 100644 --- a/src/components/sections/product/ProductCardFour.tsx +++ b/src/components/sections/product/ProductCardFour.tsx @@ -1,33 +1,39 @@ -import React from 'react'; +"use client"; -interface Product { - id: string; - name: string; +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; - price: string; - imageSrc: string; - imageAlt?: string; - onFavorite?: () => void; - onProductClick?: () => void; - isFavorited?: boolean; -} +}; interface ProductCardFourProps { - products?: Product[]; - 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' | 'one-large-right-three-stacked-left' | 'items-top-row-full-width-bottom' | 'full-width-top-items-bottom-row' | 'one-large-left-three-stacked-right'; - animationType: 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal'; + products?: ProductCard[]; + carouselMode?: "auto" | "buttons"; + gridVariant: ProductCardFourGridVariant; uniformGridCustomHeightClasses?: string; + animationType: CardAnimationType; title: string; - titleSegments?: Array<{ type: 'text'; content: string } | { type: 'image'; src: string; alt?: string }>; + titleSegments?: TitleSegment[]; 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; + tagIcon?: LucideIcon; + tagAnimation?: ButtonAnimationType; + buttons?: ButtonConfig[]; + buttonAnimation?: ButtonAnimationType; + textboxLayout: TextboxLayout; + useInvertedBackground: InvertedBackground; ariaLabel?: string; className?: string; containerClassName?: string; @@ -39,6 +45,8 @@ interface ProductCardFourProps { textBoxDescriptionClassName?: string; cardNameClassName?: string; cardPriceClassName?: string; + cardVariantClassName?: string; + actionButtonClassName?: string; gridClassName?: string; carouselClassName?: string; controlsClassName?: string; @@ -49,8 +57,182 @@ interface ProductCardFourProps { textBoxButtonTextClassName?: string; } -const ProductCardFour: React.FC = (props) => { - return
ProductCardFour Component
; +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", + 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 = "", + 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; + } + + return ( + + {products?.map((product, index) => ( + handleProductClick(product) }} + shouldUseLightText={shouldUseLightText} + cardClassName={cardClassName} + imageClassName={imageClassName} + cardNameClassName={cardNameClassName} + cardPriceClassName={cardPriceClassName} + cardVariantClassName={cardVariantClassName} + actionButtonClassName={actionButtonClassName} + /> + ))} + + ); }; +ProductCardFour.displayName = "ProductCardFour"; + export default ProductCardFour;