From 974d31c096238255fee3ddb8b4fb0e146499d9ef Mon Sep 17 00:00:00 2001
From: "nabijonovdavronbek619@gmail.com" <nabijonovdavronbek619@gmail.com>
Date: Tue, 17 Feb 2026 16:55:41 +0500
Subject: [PATCH] share button complated

---
 .../catalog_page/products/[slug]/page.tsx     |  9 ++++---
 components/pages/products/slug/rightSide.tsx  | 27 +++++++++++++------
 components/pages/services/ourService.tsx      |  4 +--
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/app/[locale]/catalog_page/products/[slug]/page.tsx b/app/[locale]/catalog_page/products/[slug]/page.tsx
index 7ccee8a..cf032e0 100644
--- a/app/[locale]/catalog_page/products/[slug]/page.tsx
+++ b/app/[locale]/catalog_page/products/[slug]/page.tsx
@@ -9,6 +9,7 @@ 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";
+import { useSearchParams } from "next/navigation";
 
 // Types
 interface ProductImage {
@@ -32,13 +33,15 @@ interface ProductDetail {
 }
 
 export default function SlugPage() {
+  const searchParams = useSearchParams();
+  const productId = searchParams.get("productId");
+  console.log("product Id : ", productId);
   const productZustand = useProductPageInfo((state) => state.product);
-
+  const id = productId ? Number(productId) : productZustand.id;
   const { data: product, isLoading } = useQuery({
     queryKey: ["product", productZustand.id],
-    queryFn: () => httpClient(endPoints.product.detail(productZustand.id)),
+    queryFn: () => httpClient(endPoints.product.detail(id)),
     select: (data) => data?.data?.data as ProductDetail,
-    enabled: !!productZustand.id,
   });
 
   useEffect(() => console.log("product detail: ", product));
diff --git a/components/pages/products/slug/rightSide.tsx b/components/pages/products/slug/rightSide.tsx
index 9bb5c6c..32c4b27 100644
--- a/components/pages/products/slug/rightSide.tsx
+++ b/components/pages/products/slug/rightSide.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { usePriceModalStore } from "@/store/useProceModalStore";
-import { Instagram, Send, Share2 } from "lucide-react";
+import { Check, Instagram, Send, Share2 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { useParams } from "next/navigation";
 import { useState } from "react";
@@ -32,7 +32,7 @@ export function RightSide({
   const [copied, setCopied] = useState(false);
 
   const handleShare = async () => {
-    const productUrl = `${window.location.origin}/${locale}/products/special_product?productId=${id}`;
+    const productUrl = `${window.location.origin}/${locale}/catalog_page/products/special_product?productId=${id}`;
 
     try {
       // Modern Web Share API dan foydalanish (mobil qurilmalar uchun)
@@ -85,7 +85,7 @@ export function RightSide({
   return (
     <div className="flex flex-col justify-center space-y-6">
       {/* Title */}
-      <h1 className="text-2xl md:text-3xl lg:text-4xl font-unbounded font-bold text-white leading-tight">
+      <h1 className="text-xl md:text-3xl font-unbounded font-bold text-white leading-tight">
         {title}
       </h1>
 
@@ -112,7 +112,7 @@ export function RightSide({
       </div>
 
       {/* Price Section */}
-      <div className="bg-[#1716169f] rounded-xl p-6 space-y-6">
+      <div className="bg-[#1716169f] rounded-xl p-5 space-y-6">
         {/* Price */}
         <div>
           <p className="text-gray-400 text-sm mb-2">{t("products.price")}:</p>
@@ -131,12 +131,23 @@ export function RightSide({
 
         {/* Social Share */}
         <div className="pt-4 border-t border-gray-800 flex items-center gap-5">
-          <button
+           <button 
             onClick={handleShare}
-            className="p-2.5 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500 flex items-center gap-3"
+            className="flex items-center gap-3 mb-3 text-gray-400 hover:text-white transition-colors group"
           >
-            <Share2 className="w-5 h-5" />
-            <span className="text-sm">{t("products.share")}</span>
+            {copied ? (
+              <>
+                <Check className="w-5 h-5 text-green-400" />
+                <span className="text-sm text-green-400">
+                  {t("products.copied") || "Link nusxalandi!"}
+                </span>
+              </>
+            ) : (
+              <>
+                <Share2 className="w-5 h-5 group-hover:scale-110 transition-transform" />
+                <span className="text-sm">{t("products.share")}:</span>
+              </>
+            )}
           </button>
           {/* <a href="" className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500">
                   <Instagram />
diff --git a/components/pages/services/ourService.tsx b/components/pages/services/ourService.tsx
index 24637cd..7fe9d37 100644
--- a/components/pages/services/ourService.tsx
+++ b/components/pages/services/ourService.tsx
@@ -186,7 +186,7 @@ export function OurService() {
                       <p className="font-almarai text-gray-400 max-w-70 w-full">
                         {data[3].subtitle}
                       </p>
-                      <button className="font-almarai sm:mt-35 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
+                      <button className="font-almarai sm:mt-37 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
                         {t("home.services.learnmore")}{" "}
                         <ChevronRight size={20} />
                       </button>
@@ -203,7 +203,7 @@ export function OurService() {
 
                 <motion.div
                   variants={cardVariants}
-                  className="py-4 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#190b00,#542604,#8f4308)] flex sm:flex-row flex-col gap-5 items-center justify-between hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
+                  className="py-6 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#190b00,#542604,#8f4308)] flex sm:flex-row flex-col gap-5 items-center justify-between hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
                 >
                   <h2 className="font-unbounded sm:text-3xl text-xl font-semibold font-armanai text-white">
                     {t("home.services.viewMoreServices")}