complated service and service detail page connection to backend
This commit is contained in:
@@ -33,7 +33,7 @@ export default function ProductCard({
|
||||
|
||||
{/* Content Container */}
|
||||
<div className="p-6 sm:p-4">
|
||||
<h3 className="text-lg text-center sm:text-xl md:text-2xl font-unbounded font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
|
||||
<h3 className="text-lg text-center font-unbounded font-bold text-white mb-4 line-clamp-3 group-hover:text-red-400 transition-colors duration-300">
|
||||
{title}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { usePriceModalStore } from "@/store/useProceModalStore";
|
||||
import { Instagram, Send, Share2 } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
interface RightSideProps {
|
||||
id: number;
|
||||
@@ -23,6 +27,45 @@ export function RightSide({
|
||||
}: RightSideProps) {
|
||||
const openModal = usePriceModalStore((state) => state.openModal);
|
||||
const t = useTranslations();
|
||||
const params = useParams();
|
||||
const locale = params.locale || "uz";
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleShare = async () => {
|
||||
const productUrl = `${window.location.origin}/${locale}/products/special_product?productId=${id}`;
|
||||
|
||||
try {
|
||||
// Modern Web Share API dan foydalanish (mobil qurilmalar uchun)
|
||||
if (navigator.share) {
|
||||
await navigator.share({
|
||||
title: title,
|
||||
text: `${title} - ${description.slice(0, 100)}...`,
|
||||
url: productUrl,
|
||||
});
|
||||
} else {
|
||||
// Desktop uchun clipboard ga copy qilish
|
||||
await navigator.clipboard.writeText(productUrl);
|
||||
setCopied(true);
|
||||
|
||||
// 2 soniyadan keyin "Copied" holatini o'chirish
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 2000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Share error:", error);
|
||||
// Fallback - clipboard ga copy qilish
|
||||
try {
|
||||
await navigator.clipboard.writeText(productUrl);
|
||||
setCopied(true);
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 2000);
|
||||
} catch (clipboardError) {
|
||||
console.error("Clipboard error:", clipboardError);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleGetPrice = () => {
|
||||
openModal({
|
||||
@@ -54,7 +97,9 @@ export function RightSide({
|
||||
|
||||
{/* Status Badge */}
|
||||
<div>
|
||||
<span className={`inline-block px-4 py-2 rounded-lg text-sm font-semibold ${statusColor}`}>
|
||||
<span
|
||||
className={`inline-block px-4 py-2 rounded-lg text-sm font-semibold ${statusColor}`}
|
||||
>
|
||||
{status}
|
||||
</span>
|
||||
</div>
|
||||
@@ -85,21 +130,25 @@ export function RightSide({
|
||||
</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">{t("products.share")}:</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">
|
||||
<div className="pt-4 border-t border-gray-800 flex items-center gap-5">
|
||||
<button
|
||||
onClick={handleShare}
|
||||
className="p-2.5 rounded-md bg-white text-red-500 hover:text-white hover:bg-red-500 flex items-center gap-3"
|
||||
>
|
||||
<Share2 className="w-5 h-5" />
|
||||
<span className="text-sm">{t("products.share")}</span>
|
||||
</button>
|
||||
{/* <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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user