113 lines
3.4 KiB
TypeScript
113 lines
3.4 KiB
TypeScript
|
||
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>
|
||
);
|
||
}
|