-
- ;
-
-type ProductCard = Product;
+interface Product {
+ id: string;
+ name: string;
+ price: string;
+ imageSrc: string;
+ imageAlt?: string;
+ onProductClick?: () => void;
+ isFavorited?: boolean;
+ onFavorite?: () => void;
+}
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?: Product[];
+ title?: string;
+ description?: string;
+ className?: 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.variant} -
-- {product.price} -
+
+
- {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;
diff --git a/src/components/sections/product/ProductCardOne.tsx b/src/components/sections/product/ProductCardOne.tsx
index 15537bc..af17603 100644
--- a/src/components/sections/product/ProductCardOne.tsx
+++ b/src/components/sections/product/ProductCardOne.tsx
@@ -1,226 +1,57 @@
-"use client";
+import React from "react";
-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
+
-
- );
-});
-
-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 (
-
+
+ {title}
+{description}
+
+ {products.map((product) => (
+
+
+ ))}
+ 
+
+
+ {product.name}
+{product.variant}
+{product.price}
+ +
-
- );
- }
-
- if (!products || products.length === 0) {
- return null;
- }
-
- return (
- Loading products...
-
- = ({
+ products = [],
+ title = "Products", description = "Our collection", className,
+}) => {
+ return (
+ ;
-
-type ProductCard = Product & {
- onQuantityChange?: (quantity: number) => void;
- initialQuantity?: number;
- priceButtonProps?: Partial>;
-};
+interface ProductCard {
+ id: string;
+ name: string;
+ price: string;
+ imageSrc: string;
+ imageAlt?: string;
+ onProductClick?: () => void;
+ isFavorited?: boolean;
+ onFavorite?: () => void;
+}
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?: ProductCard[];
+ title?: string;
+ description?: string;
+ className?: 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 (
-
-
-
-
-
+export const ProductCardOne: React.FC- {product.name} -
-- {product.price} -
-
+
+ );
};
-ProductCardOne.displayName = "ProductCardOne";
-
export default ProductCardOne;
diff --git a/src/components/sections/product/ProductCardThree.tsx b/src/components/sections/product/ProductCardThree.tsx
index f53d136..46314d2 100644
--- a/src/components/sections/product/ProductCardThree.tsx
+++ b/src/components/sections/product/ProductCardThree.tsx
@@ -1,283 +1,57 @@
-"use client";
+import React from "react";
-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{title}
+{description}
+
+ {products.map((product) => (
+
+
+
- {products?.map((product, index) => (
- handleProductClick(product) }}
- shouldUseLightText={shouldUseLightText}
- cardClassName={cardClassName}
- imageClassName={imageClassName}
- cardNameClassName={cardNameClassName}
- cardPriceClassName={cardPriceClassName}
- />
- ))}
-
- );
+
+ ))}
+
+
+
-
- );
-});
-
-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 (
-
-
- );
- }
-
- if (!products || products.length === 0) {
- return null;
- }
-
- return (
- Loading products...
-{product.name}
+{product.price}
+ +
- = ({
+ products = [],
+ title = "Products", description = "Our collection", className,
+}) => {
+ return (
+ ;
-
-type ProductCard = Product & {
- brand: string;
- rating: number;
- reviewCount: string;
-};
+interface ProductCard {
+ id: string;
+ name: string;
+ price: string;
+ imageSrc: string;
+ imageAlt?: string;
+ onProductClick?: () => void;
+ isFavorited?: boolean;
+ onFavorite?: () => void;
+}
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?: ProductCard[];
+ title?: string;
+ description?: string;
+ className?: 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.name} -
- -
-
+export const ProductCardThree: React.FC
-
-
-
-
+
+ );
};
-ProductCardThree.displayName = "ProductCardThree";
-
export default ProductCardThree;
diff --git a/src/components/sections/product/ProductCardTwo.tsx b/src/components/sections/product/ProductCardTwo.tsx
index fe4a562..3080ae4 100644
--- a/src/components/sections/product/ProductCardTwo.tsx
+++ b/src/components/sections/product/ProductCardTwo.tsx
@@ -1,267 +1,57 @@
-"use client";
+import React from "react";
-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{title}
+{description}
+
+ {products.map((product) => (
+
+
+
- {products?.map((product, index) => (
- handleProductClick(product) }}
- shouldUseLightText={shouldUseLightText}
- isFromApi={isFromApi}
- cardClassName={cardClassName}
- imageClassName={imageClassName}
- cardNameClassName={cardNameClassName}
- quantityControlsClassName={quantityControlsClassName}
- />
- ))}
-
- );
+
+ ))}
+
+
+
-
- );
-});
-
-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 (
-
-
- );
- }
-
- if (!products || products.length === 0) {
- return null;
- }
-
- return (
- Loading products...
-{product.name}
+{product.price}
+ +
- = ({
+ products = [],
+ title = "Products", description = "Our collection", className,
+}) => {
+ return (
+ (null);
- const [isLoading, setIsLoading] = useState(true);
- const [error, setError] = useState(null);
-
- useEffect(() => {
- let isMounted = true;
-
- async function loadProduct() {
- if (!productId) {
- setIsLoading(false);
- return;
- }
-
- 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();
-
- return () => {
- isMounted = false;
- };
- }, [productId]);
-
- return { product, isLoading, error };
+interface ProductDetail {
+ id: string;
+ name: string;
+ price: number;
+ description: string;
}
+
+export const useProduct = (productId: string) => {
+ const [product, setProduct] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const loadProduct = async () => {
+ try {
+ setLoading(true);
+ const result = await fetchProductById(productId);
+ if (result) {
+ setProduct(result as ProductDetail);
+ } else {
+ setError("Product not found");
+ }
+ } catch (err) {
+ setError(err instanceof Error ? err.message : "Failed to fetch product");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (productId) {
+ loadProduct();
+ }
+ }, [productId]);
+
+ return { product, loading, error };
+};
- {product.brand} -
-
-
- - {product.name} -
-
-
-
- {[...Array(5)].map((_, i) => (
-
-
- ({product.reviewCount})
-
- - {product.price} -
+export const ProductCardTwo: React.FC
+
+ );
};
-ProductCardTwo.displayName = "ProductCardTwo";
-
export default ProductCardTwo;
diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts
new file mode 100644
index 0000000..d5d76e2
--- /dev/null
+++ b/src/hooks/useMediaQuery.ts
@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+export const useMediaQuery = (query: string): boolean => {
+ const [matches, setMatches] = useState(false);
+
+ useEffect(() => {
+ const media = window.matchMedia(query);
+ if (media.matches !== matches) {
+ setMatches(media.matches);
+ }
+
+ const listener = () => setMatches(media.matches);
+ media.addListener(listener);
+ return () => media.removeListener(listener);
+ }, [matches, query]);
+
+ return matches;
+};
diff --git a/src/hooks/useProduct.ts b/src/hooks/useProduct.ts
index 3407f3a..39f157b 100644
--- a/src/hooks/useProduct.ts
+++ b/src/hooks/useProduct.ts
@@ -1,45 +1,39 @@
-"use client";
+import { useState, useEffect } from "react";
+import { fetchProductById } from "@/lib/api/product";
-import { useEffect, useState } from "react";
-import { Product, fetchProduct } from "@/lib/api/product";
-
-export function useProduct(productId: string) {
- const [product, setProduct] = useState{title}
+{description}
+
+ {products.map((product) => (
+
+
+
- {products?.map((product, index) => (
- handleProductClick(product) }}
- shouldUseLightText={shouldUseLightText}
- cardClassName={cardClassName}
- imageClassName={imageClassName}
- cardBrandClassName={cardBrandClassName}
- cardNameClassName={cardNameClassName}
- cardPriceClassName={cardPriceClassName}
- cardRatingClassName={cardRatingClassName}
- actionButtonClassName={actionButtonClassName}
- />
- ))}
-
- );
+
+ ))}
+
+
+
-
- );
-});
-
-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 (
-
-
- );
- }
-
- if (!products || products.length === 0) {
- return null;
- }
-
- return (
- Loading products...
-{product.name}
+{product.price}
+ +