115 lines
3.4 KiB
TypeScript
115 lines
3.4 KiB
TypeScript
import { usePriceModalStore } from "@/store/useProceModalStore";
|
||
import { Facebook, Share2 } from "lucide-react";
|
||
|
||
const socialLinks = [
|
||
{ name: "telegram", icon: "✈️", color: "#0088cc" },
|
||
{ name: "facebook", icon: <Facebook size={18} />, color: "#1877F2" },
|
||
{ name: "whatsapp", icon: "💬", color: "#25D366" },
|
||
{ name: "twitter", icon: "𝕏", color: "#1DA1F2" },
|
||
];
|
||
|
||
interface RightSideProps {
|
||
id: number;
|
||
title: string;
|
||
articular: string;
|
||
status: string;
|
||
description: string;
|
||
price: string;
|
||
image: string;
|
||
}
|
||
|
||
export function RightSide({
|
||
title,
|
||
articular,
|
||
status,
|
||
description,
|
||
price,
|
||
id,
|
||
image,
|
||
}: RightSideProps) {
|
||
const openModal = usePriceModalStore((state) => state.openModal);
|
||
|
||
const handleGetPrice = () => {
|
||
openModal({
|
||
id,
|
||
name: title,
|
||
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 space-y-6">
|
||
{/* Title */}
|
||
<h1 className="text-2xl md:text-3xl lg:text-4xl font-bold text-white leading-tight">
|
||
{title}
|
||
</h1>
|
||
|
||
{/* Article ID */}
|
||
<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>
|
||
<span className={`inline-block px-4 py-2 rounded-lg text-sm font-semibold ${statusColor}`}>
|
||
{status}
|
||
</span>
|
||
</div>
|
||
|
||
{/* 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="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>
|
||
|
||
{/* 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-all duration-300 hover:scale-110 hover:shadow-lg"
|
||
style={{ backgroundColor: social.color }}
|
||
title={social.name}
|
||
>
|
||
{social.icon}
|
||
</a>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |