From ba6253cd3740d2b59118813142175db7adc4d7ed Mon Sep 17 00:00:00 2001 From: bender Date: Mon, 9 Mar 2026 08:26:48 +0000 Subject: [PATCH] Switch to version 1: modified src/components/sections/product/ProductCardOne.tsx --- .../sections/product/ProductCardOne.tsx | 251 +++++++++++++++--- 1 file changed, 221 insertions(+), 30 deletions(-) diff --git a/src/components/sections/product/ProductCardOne.tsx b/src/components/sections/product/ProductCardOne.tsx index 3743b04..15537bc 100644 --- a/src/components/sections/product/ProductCardOne.tsx +++ b/src/components/sections/product/ProductCardOne.tsx @@ -1,35 +1,226 @@ -import React from "react"; -import { Product } from "@/lib/api/product"; +"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; interface ProductCardOneProps { - products?: Product[]; - title?: string; - description?: string; + 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; } -export default function ProductCardOne({ - products = [], - title = "Products", description = "Our premium product collection"}: ProductCardOneProps) { - return ( -
-
-

{title}

-

{description}

-
-
- {products.map((product) => ( -
- {product.imageSrc && ( - {product.name} - )} -

{product.name}

-

${product.price}

- {product.description && ( -

{product.description}

- )} -
- ))} -
-
- ); +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} +

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