products and product/slug page done

components/pages/products/slug/rightSide.tsx

@@ -0,0 +1,112 @@
+
+import { Facebook } 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: "twitter", icon: "𝕏", color: "#1DA1F2" },
+  { name: "whatsapp", icon: "W", color: "#25D366" },
+];
+
+interface RightSideProps {
+  title: string;
+  name: string;
+  description: string;
+  statusText: string;
+  statusColor: string;
+}
+
+export function RightSide({
+  title,
+  name,
+  description,
+  statusColor,
+  statusText,
+}: RightSideProps) {
+  return (
+    <div className="flex flex-col justify-center">
+      {/* Title */}
+      <h1 className="text-xl md:text-2xl lg:text-3xl font-bold text-white mb-4 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>
+
+      {/* Status Badge */}
+      <div className="mb-2">
+        <span
+          className={`inline-block py-2 rounded text-sm font-semibold ${statusColor}`}
+        >
+          {statusText}
+        </span>
+      </div>
+
+      {/* description */}
+      <div className="mb-2">
+        <p className="text-sm font-bold text-white mb-4 leading-tight">
+          {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={() => {}}
+            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>
+
+        {/* Social Share Icons */}
+        <div className="flex gap-3 items-center">
+          <div className="flex 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"
+                style={{ backgroundColor: social.color }}
+                title={social.name}
+              >
+                {social.icon}
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}