103 lines
3.0 KiB
TypeScript
103 lines
3.0 KiB
TypeScript
import { usePriceModalStore } from "@/store/useProceModalStore";
|
|
import { Instagram, Send, Share2 } from "lucide-react";
|
|
|
|
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-unbounded 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 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">
|
|
<Instagram />
|
|
</a> */}
|
|
<a href="https://t.me/ignum_tech" className="p-2 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500">
|
|
<Send />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |