share button complated
This commit is contained in:
@@ -9,6 +9,7 @@ import { LoadingSkeleton } from "@/components/pages/products/slug/loading";
|
||||
import { EmptyState } from "@/components/pages/products/slug/empty";
|
||||
import { useEffect } from "react";
|
||||
import { Breadcrumb } from "@/components/breadCrumb";
|
||||
import { useSearchParams } from "next/navigation";
|
||||
|
||||
// Types
|
||||
interface ProductImage {
|
||||
@@ -32,13 +33,15 @@ interface ProductDetail {
|
||||
}
|
||||
|
||||
export default function SlugPage() {
|
||||
const searchParams = useSearchParams();
|
||||
const productId = searchParams.get("productId");
|
||||
console.log("product Id : ", productId);
|
||||
const productZustand = useProductPageInfo((state) => state.product);
|
||||
|
||||
const id = productId ? Number(productId) : productZustand.id;
|
||||
const { data: product, isLoading } = useQuery({
|
||||
queryKey: ["product", productZustand.id],
|
||||
queryFn: () => httpClient(endPoints.product.detail(productZustand.id)),
|
||||
queryFn: () => httpClient(endPoints.product.detail(id)),
|
||||
select: (data) => data?.data?.data as ProductDetail,
|
||||
enabled: !!productZustand.id,
|
||||
});
|
||||
|
||||
useEffect(() => console.log("product detail: ", product));
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { usePriceModalStore } from "@/store/useProceModalStore";
|
||||
import { Instagram, Send, Share2 } from "lucide-react";
|
||||
import { Check, Instagram, Send, Share2 } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useParams } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
@@ -32,7 +32,7 @@ export function RightSide({
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleShare = async () => {
|
||||
const productUrl = `${window.location.origin}/${locale}/products/special_product?productId=${id}`;
|
||||
const productUrl = `${window.location.origin}/${locale}/catalog_page/products/special_product?productId=${id}`;
|
||||
|
||||
try {
|
||||
// Modern Web Share API dan foydalanish (mobil qurilmalar uchun)
|
||||
@@ -85,7 +85,7 @@ export function RightSide({
|
||||
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">
|
||||
<h1 className="text-xl md:text-3xl font-unbounded font-bold text-white leading-tight">
|
||||
{title}
|
||||
</h1>
|
||||
|
||||
@@ -112,7 +112,7 @@ export function RightSide({
|
||||
</div>
|
||||
|
||||
{/* Price Section */}
|
||||
<div className="bg-[#1716169f] rounded-xl p-6 space-y-6">
|
||||
<div className="bg-[#1716169f] rounded-xl p-5 space-y-6">
|
||||
{/* Price */}
|
||||
<div>
|
||||
<p className="text-gray-400 text-sm mb-2">{t("products.price")}:</p>
|
||||
@@ -133,10 +133,21 @@ export function RightSide({
|
||||
<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"
|
||||
className="flex items-center gap-3 mb-3 text-gray-400 hover:text-white transition-colors group"
|
||||
>
|
||||
<Share2 className="w-5 h-5" />
|
||||
<span className="text-sm">{t("products.share")}</span>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="w-5 h-5 text-green-400" />
|
||||
<span className="text-sm text-green-400">
|
||||
{t("products.copied") || "Link nusxalandi!"}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Share2 className="w-5 h-5 group-hover:scale-110 transition-transform" />
|
||||
<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 />
|
||||
|
||||
@@ -186,7 +186,7 @@ export function OurService() {
|
||||
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
||||
{data[3].subtitle}
|
||||
</p>
|
||||
<button className="font-almarai sm:mt-35 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
|
||||
<button className="font-almarai sm:mt-37 mt-0 text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
|
||||
{t("home.services.learnmore")}{" "}
|
||||
<ChevronRight size={20} />
|
||||
</button>
|
||||
@@ -203,7 +203,7 @@ export function OurService() {
|
||||
|
||||
<motion.div
|
||||
variants={cardVariants}
|
||||
className="py-4 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#190b00,#542604,#8f4308)] flex sm:flex-row flex-col gap-5 items-center justify-between hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
|
||||
className="py-6 px-8 rounded-xl mt-5 w-full p-5 bg-[linear-gradient(to_top_right,#000000,#190b00,#542604,#8f4308)] flex sm:flex-row flex-col gap-5 items-center justify-between hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
|
||||
>
|
||||
<h2 className="font-unbounded sm:text-3xl text-xl font-semibold font-armanai text-white">
|
||||
{t("home.services.viewMoreServices")}
|
||||
|
||||
Reference in New Issue
Block a user