detail page added

components/productSection/ProductsGrid.tsx

@@ -8,37 +8,32 @@ 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";
+import Loading from "../loading";
 
 // hello everyone
 
 export function ProductsGrid() {
   const { t } = useLanguage();
-  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
   const [allProducts, setAllProducts] = useState<any>([]);
+  const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
     async function getData() {
+      setLoading(true);
       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));
+          setLoading(false);
         });
     }
     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">
@@ -66,8 +61,11 @@ export function ProductsGrid() {
             <div className="w-20 h-1 bg-primary mx-auto rounded-full" />
           </motion.div>
 
+          {loading && <div className="w-full flex items-center justify-center">
+            <Loading /></div>}
+
           {/* Product Grid */}
-          {allProducts && allProducts.length > 0 ? (
+          { loading|| allProducts && allProducts.length > 0 ? (
             <motion.div
               initial="hidden"
               whileInView="visible"
@@ -78,7 +76,6 @@ export function ProductsGrid() {
                 <motion.div key={product.id}>
                   <ProductCard
                     product={product}
-                    onViewDetails={handleViewDetails}
                   />
                 </motion.div>
               ))}
@@ -96,14 +93,6 @@ export function ProductsGrid() {
           </Link>
         </div>
       </section>
-
-      {/* Product Modalll */}
-      {selectedProduct && (
-        <ProductModal
-          product={selectedProduct}
-          onClose={() => setSelectedProduct(null)}
-        />
-      )}
     </>
   );
 }