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

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>
   );
-}
+}