110 lines
3.5 KiB
TypeScript
110 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
import type { Product } from "@/lib/products";
|
|
import Image from "next/image";
|
|
import { useLanguage } from "@/context/language-context";
|
|
import Link from "next/link";
|
|
import { ChevronsRight } from "lucide-react";
|
|
import { ProductCard } from "./ProductCard";
|
|
import { ProductModal } from "./ProductModal";
|
|
import axios from "axios";
|
|
import EmptyState from "../productsPage/emptyData";
|
|
|
|
// hello everyone
|
|
|
|
export function ProductsGrid() {
|
|
const { t } = useLanguage();
|
|
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
|
|
const [allProducts, setAllProducts] = useState<any>([]);
|
|
|
|
useEffect(() => {
|
|
async function getData() {
|
|
await axios
|
|
.get("https://admin.promtechno.uz/api/products/")
|
|
.then((res) => {
|
|
console.log("all data main page: ", res?.data);
|
|
const allData = res?.data || [];
|
|
setAllProducts(allData.slice(0, 3));
|
|
});
|
|
}
|
|
getData();
|
|
}, []);
|
|
|
|
const handleViewDetails = (slug: number) => {
|
|
const product = allProducts.find((p: any) => p.id === slug);
|
|
if (product) {
|
|
setSelectedProduct(product);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<section id="products" className="relative py-20">
|
|
<div className="absolute -z-40 top-0 left-0 h-full w-full">
|
|
<Image
|
|
src="/images/hero2.jpg"
|
|
alt="hero image"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40" />
|
|
<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 bg-white/80 backdrop-blur-md rounded-xl overflow-hidden p-2 max-w-[300px] w-full mx-auto"
|
|
>
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
|
{t.products.title}
|
|
</h2>
|
|
<div className="w-20 h-1 bg-primary mx-auto rounded-full" />
|
|
</motion.div>
|
|
|
|
{/* Product Grid */}
|
|
{allProducts && allProducts.length > 0 ? (
|
|
<motion.div
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
|
>
|
|
{allProducts.map((product: any) => (
|
|
<motion.div key={product.id}>
|
|
<ProductCard
|
|
product={product}
|
|
onViewDetails={handleViewDetails}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
) : (
|
|
<EmptyState page="main" />
|
|
)}
|
|
</div>
|
|
<div className="mt-10 w-full flex items-center justify-center">
|
|
<Link
|
|
href="/product"
|
|
className="text-primary flex items-center gap-2 text-[18px] hover:bg-primary hover:text-white py-2 px-6 rounded-lg bg-[#ffffffb5] border mx-auto border-white"
|
|
>
|
|
{t.more} <ChevronsRight />
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Product Modalll */}
|
|
{selectedProduct && (
|
|
<ProductModal
|
|
product={selectedProduct}
|
|
onClose={() => setSelectedProduct(null)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|