-
-
-
-
-
- - {product.name} -
-- {product.variant} -
-- {product.price} -
-- Loading products... -
-
+
+ {categories.map((category) => (
+
+ ))}
+
+
+ {filteredProducts.map((product) => (
+
+
+ );
};
-ProductCatalog.displayName = "ProductCatalog";
-
-export default memo(ProductCatalog);
\ No newline at end of file
+export default ProductCatalog;
diff --git a/src/components/sections/product/ProductCardFour.tsx b/src/components/sections/product/ProductCardFour.tsx
index 303ff14..83c17a4 100644
--- a/src/components/sections/product/ProductCardFour.tsx
+++ b/src/components/sections/product/ProductCardFour.tsx
@@ -1,238 +1,83 @@
-"use client";
+import React, { useState } from 'react';
+import { Heart } from 'lucide-react';
-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 onProductClick?.(product)}
+ >
+ 
+
+ ))}
+ {product.name}
+
+ {product.rating}★
+ ({product.reviewCount})
+
+ {product.price}
+
-
- );
- }
-
- if (!products || products.length === 0) {
- return null;
- }
+ setFavorites(newFavorites);
+ };
return (
- Loading products...
-
+
);
};
-ProductCardFour.displayName = "ProductCardFour";
-
export default ProductCardFour;
diff --git a/src/components/sections/product/ProductCardOne.tsx b/src/components/sections/product/ProductCardOne.tsx
index 15537bc..a35ca61 100644
--- a/src/components/sections/product/ProductCardOne.tsx
+++ b/src/components/sections/product/ProductCardOne.tsx
@@ -1,226 +1,75 @@
-"use client";
+import React, { useState } from 'react';
+import { Heart } from 'lucide-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
+
+ {title}
+{description}
+
+ {products.map((product) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ {product.name}
+
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ ★
+
+ ))}
+
+ ({product.reviewCount})
+
+ {product.price}
+
-
-
-
-
-
- - {product.name} -
-- {product.price} -
-
-
- );
+ const handleFavorite = (productId: string) => {
+ const newFavorites = new Set(favorites);
+ if (newFavorites.has(productId)) {
+ newFavorites.delete(productId);
+ } else {
+ newFavorites.add(productId);
}
+ setFavorites(newFavorites);
+ };
- if (!products || products.length === 0) {
- return null;
- }
-
- return (
- Loading products...
-
+
+ );
};
-ProductCardOne.displayName = "ProductCardOne";
-
export default ProductCardOne;
diff --git a/src/components/sections/product/ProductCardThree.tsx b/src/components/sections/product/ProductCardThree.tsx
index f53d136..9ec855f 100644
--- a/src/components/sections/product/ProductCardThree.tsx
+++ b/src/components/sections/product/ProductCardThree.tsx
@@ -1,283 +1,83 @@
-"use client";
+import React, { useState } from 'react';
+import { Heart } from 'lucide-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
+ {products.map((product) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ {product.name}
+
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ ★
+
+ ))}
+
+ ({product.reviewCount})
+
+ {product.price}
+
-
- - {product.name} -
- -
-
-
-
-
-
-
-
- );
+ const handleFavorite = (productId: string) => {
+ const newFavorites = new Set(favorites);
+ if (newFavorites.has(productId)) {
+ newFavorites.delete(productId);
+ } else {
+ newFavorites.add(productId);
}
+ setFavorites(newFavorites);
+ };
- if (!products || products.length === 0) {
- return null;
- }
-
- return (
- Loading products...
-
+
+ );
};
-ProductCardThree.displayName = "ProductCardThree";
-
export default ProductCardThree;
diff --git a/src/components/sections/product/ProductCardTwo.tsx b/src/components/sections/product/ProductCardTwo.tsx
index fe4a562..3ec1cc7 100644
--- a/src/components/sections/product/ProductCardTwo.tsx
+++ b/src/components/sections/product/ProductCardTwo.tsx
@@ -1,267 +1,109 @@
-"use client";
+import React, { useState } from 'react';
+import { Heart } from 'lucide-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) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ {product.name}
+
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ ★
+
+ ))}
+
+ ({product.reviewCount})
+
+ {product.price}
+
-
- - {product.brand} -
-
-
- - {product.name} -
-
-
-
- {[...Array(5)].map((_, i) => (
-
-
- ({product.reviewCount})
-
- - {product.price} -
-
-
- );
+ const handleFavorite = (productId: string) => {
+ const newFavorites = new Set(favorites);
+ if (newFavorites.has(productId)) {
+ newFavorites.delete(productId);
+ } else {
+ newFavorites.add(productId);
}
+ setFavorites(newFavorites);
+ };
- if (!products || products.length === 0) {
- return null;
- }
-
- return (
- Loading products...
-
+
+ );
};
-ProductCardTwo.displayName = "ProductCardTwo";
-
export default ProductCardTwo;
diff --git a/src/hooks/useProduct.ts b/src/hooks/useProduct.ts
index 3407f3a..33d7dc6 100644
--- a/src/hooks/useProduct.ts
+++ b/src/hooks/useProduct.ts
@@ -1,45 +1,48 @@
-"use client";
+import { useState, useEffect } from 'react';
+import { getProductById } 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
+ {tag && (
+
+
+ {TagIcon &&
+ )}
+ {title}
+{description}
+
+ {products.map((product) => (
+
+
+
+ ))}
+
+
+
+
+
+ {product.brand}
+
+ {product.name}
+
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ ★
+
+ ))}
+
+ ({product.reviewCount})
+
+ {product.price}
+