From 39c2ca6ef4634a2e5b7af6f21985547163a4469b Mon Sep 17 00:00:00 2001 From: bender Date: Wed, 4 Mar 2026 19:07:15 +0000 Subject: [PATCH] Switch to version 1: modified src/components/sections/product/ProductCardTwo.tsx --- .../sections/product/ProductCardTwo.tsx | 310 +++++++++++++++--- 1 file changed, 261 insertions(+), 49 deletions(-) diff --git a/src/components/sections/product/ProductCardTwo.tsx b/src/components/sections/product/ProductCardTwo.tsx index 6c6bb9f..fe4a562 100644 --- a/src/components/sections/product/ProductCardTwo.tsx +++ b/src/components/sections/product/ProductCardTwo.tsx @@ -1,55 +1,267 @@ -import React from 'react'; +"use client"; -interface Product { - id: string; - name: string; - price: string; - imageSrc: string; - imageAlt?: string; - onFavorite?: () => void; - onProductClick?: () => void; - isFavorited?: boolean; -} +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"; -interface ProductCardTwoProps { - 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'; - 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; -} +type ProductCardTwoGridVariant = Exclude; -const ProductCardTwo: React.FC = (props) => { - return
ProductCardTwo Component
; +type ProductCard = Product & { + brand: string; + rating: number; + reviewCount: string; }; +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; +} + +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} +

+
+
+ ); +}); + +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} + /> + ))} + + ); +}; + +ProductCardTwo.displayName = "ProductCardTwo"; + export default ProductCardTwo;