56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from "react";
|
|
import EmptyState from "./emptyData";
|
|
import { GET } from "@/lib/allProducts";
|
|
import { ProductModal } from "../ProductModal";
|
|
import { motion } from "framer-motion";
|
|
import { ProductCard } from "../ProductCard";
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
export default function Products() {
|
|
const [allProducts, setAllProducts] = useState<any>(null);
|
|
const [selectedProduct, setSelectedProduct] = useState<any>(null);
|
|
useEffect(() => {
|
|
const all = GET();
|
|
all && Array.isArray(all) && all.length > 0
|
|
? setAllProducts(all)
|
|
: setAllProducts([]);
|
|
setAllProducts;
|
|
}, []);
|
|
const handleViewDetails = (slug: string) => {
|
|
const product = allProducts.find((p: any) => p.slug === slug);
|
|
if (product) {
|
|
setSelectedProduct(product);
|
|
}
|
|
};
|
|
return (
|
|
<div className="">
|
|
{allProducts && allProducts.length > 0 ? (
|
|
<div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4">
|
|
{allProducts.map((product: any) => (
|
|
<motion.div key={product.id} variants={itemVariants}>
|
|
<ProductCard
|
|
product={product}
|
|
onViewDetails={handleViewDetails}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<EmptyState />
|
|
)}
|
|
{/* Product Modal */}
|
|
{selectedProduct && (
|
|
<ProductModal
|
|
product={selectedProduct}
|
|
onClose={() => setSelectedProduct(null)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|