complated service and service detail page connection to backend

This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-02-17 16:15:49 +05:00
parent c01520399a
commit 123e6324e4
9 changed files with 218 additions and 202 deletions

View File

@@ -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>
);
}
}