vreadCrumb added

app/[locale]/catalog_page/page.tsx

@@ -1,3 +1,4 @@
+import { Breadcrumb } from "@/components/breadCrumb";
 import Catalog from "@/components/pages/home/blog/catalog";
 import { ProductBanner } from "@/components/pages/products";
 import { MainSubCategory } from "@/components/pages/subCategory";
@@ -7,6 +8,7 @@ export default function Page() {
     <div className="bg-[#1e1d1c] pb-30">
       <ProductBanner />
       <div className="max-w-300 mx-auto w-full pt-20">
+        <Breadcrumb />
         <Catalog />
       </div>
     </div>

app/[locale]/catalog_page/products/[slug]/page.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import { Features, RightSide, SliderComp } from "@/components/pages/products";
+import { useProductPageInfo } from "@/store/useProduct";
+import { useQuery } from "@tanstack/react-query";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { AlertCircle } from "lucide-react";
+import { LoadingSkeleton } from "@/components/pages/products/slug/loading";
+import { EmptyState } from "@/components/pages/products/slug/empty";
+import { useEffect } from "react";
+import { Breadcrumb } from "@/components/breadCrumb";
+
+// Types
+interface ProductImage {
+  id: number;
+  product: number;
+  image: string;
+  is_main: boolean;
+  order: number;
+}
+
+interface ProductDetail {
+  id: number;
+  name: string;
+  articular: string;
+  status: string;
+  description: string;
+  size: number;
+  price: string;
+  features: string[];
+  images: ProductImage[];
+}
+
+export default function SlugPage() {
+  const productZustand = useProductPageInfo((state) => state.product);
+
+  const { data: product, isLoading } = useQuery({
+    queryKey: ["product", productZustand.id],
+    queryFn: () => httpClient(endPoints.product.detail(productZustand.id)),
+    select: (data) => data?.data?.data as ProductDetail,
+    enabled: !!productZustand.id,
+  });
+
+  useEffect(() => console.log("product detail: ", product));
+
+  // Loading State
+  if (isLoading) {
+    return <LoadingSkeleton />;
+  }
+
+  // Empty State
+  if (!product) {
+    return <EmptyState />;
+  }
+
+  // Extract images
+  const productImages = product.images?.map((img) => img.image) || [];
+  const mainImage =
+    product.images?.find((img) => img.is_main)?.image || productImages[0] || "";
+  const features = product.features.map((item: any) => item.name);
+
+  return (
+    <div className="min-h-screen bg-[#1e1d1c] px-4 md:px-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="pt-30 pb-10">
+          <Breadcrumb />
+        </div>
+        {/* Main Product Section */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 mb-12">
+          {/* Left - Image Slider */}
+          <SliderComp imgs={productImages} />
+
+          {/* Right - Product Info */}
+          <RightSide
+            id={product.id}
+            title={product.name}
+            articular={product.articular}
+            status={product.status}
+            description={product.description}
+            price={product.price}
+            image={mainImage}
+          />
+        </div>
+
+        {/* Features Section */}
+        {product.features && product.features.length > 0 && (
+          <Features features={features} />
+        )}
+      </div>
+    </div>
+  );
+}

app/[locale]/catalog_page/products/page.tsx

@@ -0,0 +1,19 @@
+"use client";
+import { Breadcrumb } from "@/components/breadCrumb";
+import { ProductBanner, Products } from "@/components/pages/products";
+import FilterCatalog from "@/components/pages/products/filter/catalog/filterCatalog";
+import { useSubCategory } from "@/store/useSubCategory";
+
+export default function Page() {
+  const subCategory = useSubCategory((state) => state.subCategory);
+  return (
+    <div className="bg-[#1e1d1c] pb-30">
+      <ProductBanner />
+      {/* <FilterCatalog /> */}
+      <div className="max-w-300 w-full mx-auto pt-15">
+        <Breadcrumb customLabels={{ subCategory: subCategory.name}} />
+      </div>
+      <Products />
+    </div>
+  );
+}

app/[locale]/catalog_page/subCategory/page.tsx

@@ -0,0 +1,17 @@
+import { Breadcrumb } from "@/components/breadCrumb";
+import { ProductBanner } from "@/components/pages/products";
+import { MainSubCategory } from "@/components/pages/subCategory";
+
+export default function Page() {
+  return (
+    <div className="bg-[#1e1d1c] pb-30">
+      <ProductBanner />
+      <div className="pb-20">
+        <div className="max-w-350 mx-auto w-full py-10">
+          <Breadcrumb />
+        </div>
+        <MainSubCategory />
+      </div>
+    </div>
+  );
+}