84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { useTranslations } from "next-intl";
|
|
import { ProductCard } from "./ProductCard";
|
|
import { getAllProducts } from "@/lib/products";
|
|
import type { Product } from "@/lib/products";
|
|
import { ProductModal } from "./ProductModal";
|
|
|
|
export function ProductsGrid() {
|
|
const t = useTranslations();
|
|
const products = getAllProducts();
|
|
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
|
|
|
|
const handleViewDetails = (slug: string) => {
|
|
const product = products.find((p) => p.slug === slug);
|
|
if (product) {
|
|
setSelectedProduct(product);
|
|
}
|
|
};
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: { staggerChildren: 0.1 },
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<section id="products" className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
{t("products.title")}
|
|
</h2>
|
|
<div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
|
|
</motion.div>
|
|
|
|
{/* Product Grid */}
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{products.map((product) => (
|
|
<motion.div key={product.id} variants={itemVariants}>
|
|
<ProductCard
|
|
product={product}
|
|
onViewDetails={handleViewDetails}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Product Modal */}
|
|
{selectedProduct && (
|
|
<ProductModal
|
|
product={selectedProduct}
|
|
onClose={() => setSelectedProduct(null)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|