product section translaiton complated

components/pages/products/slug/rightSide.tsx

@@ -1,5 +1,6 @@
 import { usePriceModalStore } from "@/store/useProceModalStore";
 import { Instagram, Send, Share2 } from "lucide-react";
+import { useTranslations } from "next-intl";
 
 interface RightSideProps {
   id: number;
@@ -21,6 +22,7 @@ export function RightSide({
   image,
 }: RightSideProps) {
   const openModal = usePriceModalStore((state) => state.openModal);
+  const t = useTranslations();
 
   const handleGetPrice = () => {
     openModal({
@@ -68,7 +70,7 @@ export function RightSide({
       <div className="bg-[#1716169f] rounded-xl p-6 space-y-6">
         {/* Price */}
         <div>
-          <p className="text-gray-400 text-sm mb-2">Narx:</p>
+          <p className="text-gray-400 text-sm mb-2">{t("products.price")}:</p>
           <h2 className="text-3xl md:text-4xl font-bold text-red-700">
             ${price}
           </h2>
@@ -79,14 +81,14 @@ export function RightSide({
           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
+          {t("products.send")}
         </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>
+            <span className="text-sm text-gray-400">{t("products.share")}:</span>
           </div>
           <div className="flex items-center gap-5 mt-5">
                 {/* <a href="" className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500">