detail page connected to backend , modal form for one product connected to backend

components/pages/home/blog/catalog.tsx

@@ -16,9 +16,6 @@ export default function   Catalog() {
     queryFn: () => httpClient(endPoints.category.all),
     select: (data): CategoryType[] => data?.data?.results,
   });
-  useEffect(() => {
-    console.log("product catalog data: ", data);
-  }, [data]);
 
   if (isLoading) {
     return (

components/pages/products/filter/filter.tsx

@@ -55,7 +55,6 @@ export default function Filter() {
   useEffect(() => {
     catalog && setCatalogData(catalog);
     size && setSizeData(size);
-    console.log("catalog: ", catalog, "size: ", size);
   }, [size, catalog]);
 
   // Bo'lim uchun ko'rsatiladigan itemlar
@@ -67,7 +66,6 @@ export default function Filter() {
   const visibleSectionNumber = numberExpanded
     ? sizeData
     : sizeData.slice(0, 10);
-  console.log("filter: ", filter);
 
   return (
     <div className="space-y-3 lg:max-w-70 lg:px-0 px-3 w-full text-white">

components/pages/products/product/mianProduct.tsx

@@ -5,12 +5,14 @@ import { useQuery } from "@tanstack/react-query";
 import ProductCard from "./productCard";
 import { useCategory } from "@/store/useCategory";
 import { useFilter } from "@/lib/filter-zustand";
-import { useMemo } from "react";
+import { useEffect, useMemo } from "react";
+import { useProductPageInfo } from "@/store/useProduct";
 
 export default function MainProduct() {
   const category = useCategory((state) => state.category);
   const filter = useFilter((state) => state.filter);
-  const getFiltersByType = useFilter((state)=>state.getFiltersByType)
+  const getFiltersByType = useFilter((state) => state.getFiltersByType);
+  const setProduct = useProductPageInfo((state) => state.setProducts);
 
   // Query params yaratish
   const queryParams = useMemo(() => {
@@ -38,11 +40,19 @@ export default function MainProduct() {
   }, [category.id, category.have_sub_category, queryParams]);
 
   const { data, isLoading, error } = useQuery({
-    queryKey: ["products", category.id , queryParams],
+    queryKey: ["products", category.id, queryParams],
     queryFn: () => httpClient(requestLink),
-    select: (data) => data?.data?.data?.results,
+    select: (data) => {
+      const product = data?.data?.data?.results;
+      return product.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+        image: item.images[0].image,
+      }));
+    },
   });
 
+
   if (isLoading) {
     return (
       <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
@@ -74,6 +84,7 @@ export default function MainProduct() {
       {data.map((item: any) => (
         <ProductCard
           key={item.id} // ✅ index o'rniga id ishlatish
+          getProduct={() => setProduct(item)}
           title={item.name}
           image={item.image}
           slug={item.slug}

components/pages/products/product/productCard.tsx

@@ -1,4 +1,3 @@
-
 import { useLocale } from "next-intl";
 import Image from "next/image";
 import Link from "next/link";
@@ -7,17 +6,19 @@ interface ProductCardProps {
   title: string;
   image: string;
   slug: string;
+  getProduct: () => void;
 }
 
 export default function ProductCard({
   title,
   image,
   slug,
+  getProduct,
 }: ProductCardProps) {
   const locale = useLocale();
 
   return (
-    <Link href={`/${locale}/products/${slug}`}>
+    <Link href={`/${locale}/products/${slug}`} onClick={getProduct}>
       <article className="group transition-all duration-300 hover:cursor-pointer max-sm:max-w-100 max-sm:mx-auto max-sm:w-full">
         {/* Image Container */}
         <div className="relative rounded-2xl h-45 sm:h-55 md:h-65 lg:w-[95%] w-[90%] mx-auto overflow-hidden">

components/pages/products/slug/empty.tsx

@@ -0,0 +1,36 @@
+// Empty State Component
+export function EmptyState() {
+  return (
+    <div className="min-h-screen bg-[#1e1d1c] flex items-center justify-center px-4">
+      <div className="text-center max-w-md">
+        <div className="w-24 h-24 mx-auto mb-6 bg-gray-800 rounded-full flex items-center justify-center">
+          <svg
+            className="w-12 h-12 text-gray-600"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+            />
+          </svg>
+        </div>
+        <h2 className="text-2xl font-bold text-white mb-2">
+          Mahsulot topilmadi
+        </h2>
+        <p className="text-gray-400 mb-6">
+          Siz qidirayotgan mahsulot mavjud emas yoki o'chirilgan
+        </p>
+        <a
+          href="/products"
+          className="inline-block bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition"
+        >
+          Mahsulotlarga qaytish
+        </a>
+      </div>
+    </div>
+  );
+}

components/pages/products/slug/features.tsx

@@ -1,27 +1,41 @@
 export function Features({ features }: { features: string[] }) {
+  if (!features || features.length === 0) {
+    return null;
+  }
+
   return (
-    <table className="w-full rounded-xl overflow-hidden">
-      <thead>
-        <tr className="border-b border-gray-700 bg-black">
-          <th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
-            Feature
-          </th>
-        </tr>
-      </thead>
-      <tbody>
-        {features.map((feature, index) => (
-          <tr
-            key={index}
-            className={` border-gray-700 transition-colors hover:bg-opacity-80 ${
-              index % 2 === 0 ? "bg-[#323232]" : "bg-black/20"
-            }`}
-          >
-            <td className="px-4 py-4 md:px-6 text-sm md:text-base text-white font-medium">
-              {feature}
-            </td>
-          </tr>
-        ))}
-      </tbody>
-    </table>
+    <div className="mt-12">
+      <h2 className="text-2xl md:text-3xl font-bold text-white mb-6">
+        Xususiyatlar
+      </h2>
+      <div className="rounded-xl overflow-hidden border border-gray-800 shadow-xl">
+        <table className="w-full">
+          <thead>
+            <tr className="bg-linear-to-r from-gray-900 to-black border-b border-gray-800">
+              <th className="px-4 py-4 md:px-6 text-left text-sm md:text-base font-semibold text-white">
+                Xususiyat
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {features.map((feature, index) => (
+              <tr
+                key={index}
+                className={`border-b border-gray-800 last:border-b-0 transition-colors hover:bg-red-900/10 ${
+                  index % 2 === 0 ? "bg-[#252525]" : "bg-[#1e1e1e]"
+                }`}
+              >
+                <td className="px-4 py-4 md:px-6 text-sm md:text-base text-gray-300">
+                  <div className="flex items-start gap-3">
+                    <span className="text-red-700 mt-1">•</span>
+                    <span>{feature}</span>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
   );
-}
+}

components/pages/products/slug/loading.tsx

@@ -0,0 +1,61 @@
+// Loading Skeleton Component
+export function LoadingSkeleton() {
+  return (
+    <div className="min-h-screen bg-[#1e1d1c] py-20 md:py-32 lg:py-40 px-4 md:px-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 mb-12">
+          {/* Image Skeleton */}
+          <div className="w-full h-96 md:h-125 bg-gray-800 rounded-lg animate-pulse" />
+
+          {/* Info Skeleton */}
+          <div className="flex flex-col justify-center space-y-4">
+            {/* Title */}
+            <div className="h-8 bg-gray-800 rounded animate-pulse w-3/4" />
+
+            {/* Articular */}
+            <div className="h-6 bg-gray-800 rounded animate-pulse w-1/2" />
+
+            {/* Status */}
+            <div className="h-8 bg-gray-800 rounded animate-pulse w-1/3" />
+
+            {/* Description */}
+            <div className="space-y-2">
+              <div className="h-4 bg-gray-800 rounded animate-pulse w-full" />
+              <div className="h-4 bg-gray-800 rounded animate-pulse w-5/6" />
+              <div className="h-4 bg-gray-800 rounded animate-pulse w-4/6" />
+            </div>
+
+            {/* Price */}
+            <div className="h-10 bg-gray-800 rounded animate-pulse w-32" />
+
+            {/* Buttons */}
+            <div className="flex gap-4">
+              <div className="h-12 bg-gray-800 rounded animate-pulse flex-1" />
+            </div>
+
+            {/* Social */}
+            <div className="flex gap-2">
+              {[1, 2, 3, 4, 5, 6].map((i) => (
+                <div
+                  key={i}
+                  className="w-10 h-10 bg-gray-800 rounded-lg animate-pulse"
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* Features Skeleton */}
+        <div className="space-y-2">
+          <div className="h-12 bg-gray-800 rounded-t-xl animate-pulse" />
+          {[1, 2, 3, 4].map((i) => (
+            <div
+              key={i}
+              className="h-16 bg-gray-800/50 rounded animate-pulse"
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

components/pages/products/slug/rightSide.tsx

@@ -1,116 +1,106 @@
 import { usePriceModalStore } from "@/store/useProceModalStore";
-import { Facebook } from "lucide-react";
+import { Facebook, Share2 } from "lucide-react";
 
 const socialLinks = [
   { name: "telegram", icon: "✈️", color: "#0088cc" },
-  { name: "facebook", icon: <Facebook />, color: "#1877F2" },
-  { name: "odnoklassniki", icon: "ok", color: "#ED7100" },
-  { name: "vkontakte", icon: "VK", color: "#0077FF" },
+  { name: "facebook", icon: <Facebook size={18} />, color: "#1877F2" },
+  { name: "whatsapp", icon: "💬", color: "#25D366" },
   { name: "twitter", icon: "𝕏", color: "#1DA1F2" },
-  { name: "whatsapp", icon: "W", color: "#25D366" },
 ];
 
 interface RightSideProps {
   id: number;
   title: string;
-  name: string;
+  articular: string;
+  status: string;
   description: string;
-  statusText: string;
-  statusColor: string;
+  price: string;
   image: string;
 }
 
 export function RightSide({
   title,
-  name,
+  articular,
+  status,
   description,
-  statusColor,
-  statusText,
+  price,
   id,
   image,
 }: RightSideProps) {
   const openModal = usePriceModalStore((state) => state.openModal);
+
   const handleGetPrice = () => {
     openModal({
-      id: id,
+      id,
       name: title,
-      image: image,
-      inStock: true,
+      image,
+      inStock: status === "Sotuvda mavjud",
     });
   };
+
+  // Status color logic
+  const isInStock = status === "Sotuvda mavjud";
+  const statusColor = isInStock
+    ? "bg-green-600/20 text-green-400 border border-green-600/30"
+    : "bg-red-600/20 text-red-400 border border-red-600/30";
+
   return (
-    <div className="flex flex-col justify-center">
+    <div className="flex flex-col justify-center space-y-6">
       {/* Title */}
-      <h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-white mb-4 leading-tight">
+      <h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white leading-tight">
         {title}
       </h1>
 
       {/* Article ID */}
-      <div className="mb-3">
-        <p className="text-gray-400">
-          Artikul:
-          <span className="text-white font-semibold">{name}</span>
-        </p>
+      <div className="flex items-center gap-2 text-sm md:text-base">
+        <span className="text-gray-400">Artikul:</span>
+        <span className="text-white font-semibold">{articular}</span>
       </div>
 
       {/* Status Badge */}
-      <div className="mb-2">
-        <span
-          className={`inline-block py-2 rounded text-sm font-semibold ${statusColor}`}
-        >
-          {statusText}
+      <div>
+        <span className={`inline-block px-4 py-2 rounded-lg text-sm font-semibold ${statusColor}`}>
+          {status}
         </span>
       </div>
 
-      {/* description */}
-      <div className="mb-2">
-        <p className="text-sm font-bold text-white mb-4 leading-tight">
+      {/* Description */}
+      <div className="border-l-4 border-red-700 pl-4">
+        <p className="text-sm md:text-base text-gray-300 leading-relaxed">
           {description}
         </p>
       </div>
 
       {/* Price Section */}
-      <div className="mb-8">
-        <h2 className="text-2xl md:text-3xl font-bold text-red-700 mb-6">
-          17.00$
-        </h2>
-
-        {/* Action Buttons */}
-        <div className="flex flex-col sm:flex-row gap-4 mb-6">
-          {/* <button
-                        onClick={onPriceClick}
-                        className="flex-1 bg-red-700 hover:bg-red-800 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"
-                      >
-                        Narxni bilish
-                      </button> */}
-          <button
-            onClick={handleGetPrice}
-            className="flex-1 border-2 border-red-700 text-red-700 hover:bg-red-50 font-bold py-3 px-6 rounded-lg transition duration-300"
-          >
-            Xabar yuborish
-          </button>
-          {/* <button
-                        onClick={() => setIsFavorite(!isFavorite)}
-                        className="p-3 border-2 border-gray-600 rounded-lg hover:border-red-700 transition duration-300"
-                        title="Add to favorites"
-                      >
-                        <Heart
-                          size={24}
-                          className={
-                            isFavorite ? "fill-red-700 text-red-700" : "text-gray-600"
-                          }
-                        />
-                      </button> */}
+      <div className="bg-[#1716169f] rounded-xl p-6 space-y-6">
+        {/* Price */}
+        <div>
+          <p className="text-gray-400 text-sm mb-2">Narx:</p>
+          <h2 className="text-3xl md:text-4xl font-bold text-red-700">
+            ${price}
+          </h2>
         </div>
 
-        {/* Social Share Icons */}
-        <div className="flex gap-3 items-center">
-          <div className="flex gap-2">
+        {/* Action Button */}
+        <button
+          onClick={handleGetPrice}
+          className="w-full bg-red-700 hover:bg-red-800 text-white font-bold py-4 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg hover:shadow-red-700/50"
+        >
+          Xabar yuborish
+        </button>
+
+        {/* Social Share */}
+        <div className="pt-4 border-t border-gray-800">
+          <div className="flex items-center gap-3 mb-3">
+            <Share2 className="w-5 h-5 text-gray-400" />
+            <span className="text-sm text-gray-400">Ulashish:</span>
+          </div>
+          <div className="flex flex-wrap gap-2">
             {socialLinks.map((social) => (
               <a
                 key={social.name}
                 href="#"
-                className="w-10 h-10 rounded-lg flex items-center justify-center text-white text-sm font-bold transition duration-300 hover:scale-110"
+                className="w-10 h-10 rounded-lg flex items-center justify-center text-white text-sm font-bold transition-all duration-300 hover:scale-110 hover:shadow-lg"
                 style={{ backgroundColor: social.color }}
                 title={social.name}
               >
@@ -122,4 +112,4 @@ export function RightSide({
       </div>
     </div>
   );
-}
+}

components/pages/products/slug/slider.tsx

@@ -1,60 +1,133 @@
 "use client";
 import { Swiper, SwiperSlide } from "swiper/react";
-import { Navigation } from "swiper/modules";
+import { Navigation, Pagination, Thumbs } from "swiper/modules";
+import { useState } from "react";
+import type { Swiper as SwiperType } from "swiper";
 import "swiper/css";
 import "swiper/css/navigation";
-import { DATA } from "@/lib/demoData";
+import "swiper/css/pagination";
+import "swiper/css/thumbs";
+import Image from "next/image";
 
-// The custom CSS selectors for navigation
 const navigationPrevEl = ".custom-swiper-prev";
 const navigationNextEl = ".custom-swiper-next";
 
 export function SliderComp({ imgs }: { imgs: string[] }) {
+  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
+
+  // Agar rasm bo'lmasa
+  if (!imgs || imgs.length === 0) {
+    return (
+      <div className="w-full h-96 md:h-125 bg-gray-800 rounded-lg flex items-center justify-center">
+        <div className="text-center">
+          <svg
+            className="w-20 h-20 text-gray-600 mx-auto mb-4"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+            />
+          </svg>
+          <p className="text-gray-500">Rasm mavjud emas</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div>
-      <div className="flex items-center justify-center relative">
+    <div className="space-y-4">
+      {/* Main Slider */}
+      <div className="relative group">
         <Swiper
-          modules={[Navigation]}
+          modules={[Navigation, Pagination, Thumbs]}
+          thumbs={{ swiper: thumbsSwiper && !thumbsSwiper.destroyed ? thumbsSwiper : null }}
           navigation={{
-            // Pass the class selectors here
             prevEl: navigationPrevEl,
             nextEl: navigationNextEl,
           }}
           pagination={{ clickable: true }}
-          className="w-full h-96 md:h-125 bg-white rounded-lg overflow-hidden shadow-lg"
+          loop={imgs.length > 1}
+          className="w-[90%] h-96 md:h-96  rounded-lg overflow-hidden shadow-xl"
         >
           {imgs.map((image, index) => (
             <SwiperSlide
               key={index}
-              className="bg-white flex items-center justify-center"
+              className=" flex items-center justify-center"
             >
-              <img
-                src={image || "/placeholder.svg"}
-                alt={`${DATA[0].title} - ${index + 1}`}
-                className="w-full h-full object-contain p-4"
-              />
+              <div className="relative w-full h-full p-4 md:p-8">
+                <Image
+                  src={image}
+                  alt={`Product image ${index + 1}`}
+                  fill
+                  className="object-contain"
+                  sizes="(max-width: 768px) 100vw, 50vw"
+                  priority={index === 0}
+                />
+              </div>
             </SwiperSlide>
           ))}
         </Swiper>
-        {/* Custom buttons */}
-        <button
-          className={`${navigationPrevEl.replace(
-            ".",
-            "",
-          )} absolute z-10 top-1/2 left-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center 
-          text-white flex items-center justify-center hover:cursor-pointer transition`}
-        >
-          ‹
-        </button>
-        <button
-          className={`${navigationNextEl.replace(
-            ".",
-            "",
-          )} absolute z-10 top-1/2 right-5 rounded-sm pb-2 w-8 h-8 bg-primary text-[30px] text-center text-white flex items-center justify-center hover:cursor-pointer transition `}
-        >
-          ›
-        </button>
+
+        {/* Navigation Buttons */}
+        {imgs.length > 1 && (
+          <>
+            <button
+              className={`${navigationPrevEl.replace(
+                ".",
+                ""
+              )} absolute z-10 top-1/2 -translate-y-1/2 left-2 md:left-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+              </svg>
+            </button>
+            <button
+              className={`${navigationNextEl.replace(
+                ".",
+                ""
+              )} absolute z-10 top-1/2 -translate-y-1/2 right-2 md:right-4 rounded-lg w-10 h-10 md:w-12 md:h-12 bg-red-700/90 hover:bg-red-800 text-white flex items-center justify-center transition opacity-0 group-hover:opacity-100 shadow-lg`}
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </button>
+          </>
+        )}
       </div>
+
+      {/* Thumbnail Slider */}
+      {imgs.length > 1 && (
+        <Swiper
+          onSwiper={setThumbsSwiper}
+          spaceBetween={10}
+          slidesPerView={4}
+          breakpoints={{
+            640: { slidesPerView: 5 },
+            768: { slidesPerView: 6 },
+          }}
+          watchSlidesProgress
+          className="w-full"
+        >
+          {imgs.map((image, index) => (
+            <SwiperSlide key={index}>
+              <div className="relative h-20 md:h-24 bg-white rounded-lg overflow-hidden cursor-pointer border-2 border-transparent hover:border-red-700 transition">
+                <Image
+                  src={image}
+                  alt={`Thumbnail ${index + 1}`}
+                  fill
+                  className="object-contain p-2"
+                  sizes="100px"
+                />
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
     </div>
   );
-}
+}