Davron/ignum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complated service and service detail page connection to backend

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

2
components/pages/products/product/productCard.tsx
View File

@@ -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>

75
components/pages/products/slug/rightSide.tsx
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>
);
}
}

73
components/pages/services/ourService.tsx
View File

@@ -1,4 +1,4 @@
"use client"
"use client";
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
import httpClient from "@/request/api";
import { endPoints } from "@/request/links";
@@ -10,15 +10,18 @@ import Link from "next/link";
import { motion } from "framer-motion";
import { ServicesLoading } from "./loading";
import { EmptyServices } from "./empty";
import { useServiceDetail } from "@/store/useService";
export function OurService() {
const t = useTranslations();
const locale = useLocale();
const setServiceId = useServiceDetail((state) => state.setServiceId);
// get request
// get request
const { data, isLoading, isError } = useQuery({
queryKey: ['firesafety'],
queryFn: () => httpClient(endPoints.services.all)
queryKey: ["firesafety"],
queryFn: () => httpClient(endPoints.services.all),
select: (data) => data?.data?.data?.results,
});
console.log("service data: ", data);
@@ -84,44 +87,52 @@ export function OurService() {
animate="visible"
>
{/* cards */}
<div className="max-w-250 w-full mx-auto flex sm:flex-row flex-col items-center gap-5 my-10">
<motion.div variants={cardVariants} className="sm:w-[55%] w-full">
<div className="max-w-250 w-full mx-auto overflow-hidden flex sm:flex-row flex-col items-center gap-5 my-10">
<motion.div
variants={cardVariants}
className="sm:w-[55%] overflow-hidden w-full"
onClick={() => setServiceId(data[0].id)}
>
<Link
href={`/${locale}/services/detail`}
className="block hover:cursor-pointer relative space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
className="overflow-hidden block hover:cursor-pointer relative space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
>
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
{t("home.services.services.operation.title")}
{data[0].title}
</p>
<p className="font-almarai text-gray-400 max-w-80 w-full">
{t("home.services.services.operation.description")}
{data[0].subtitle}
</p>
<button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
{t("home.services.learnmore")} <ChevronRight size={20} />
</button>
<Image
src="/images/home/gruop.png"
src={data[0].main_image}
alt="images"
width={200}
height={100}
className="object-contain sm:absolute bottom-0 right-2 z-10"
className="object-contain sm:absolute bottom-0 -right-2 z-10"
/>
</Link>
</motion.div>
<motion.div variants={cardVariants} className="sm:w-[45%] w-full">
<motion.div
onClick={() => setServiceId(data[1].id)}
variants={cardVariants}
className="sm:w-[45%] w-full"
>
<div className="hover:cursor-pointer relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300">
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
{t("home.services.services.suppression.title")}
{data[1].title}
</p>
<p className="font-almarai text-gray-400 max-w-70 w-full">
{t("home.services.services.suppression.description")}
{data[1].subtitle}
</p>
<button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
{t("home.services.learnmore")} <ChevronRight size={20} />
</button>
<Image
src="/images/home/redShlang.png"
src={data[1].main_image}
alt="images"
width={200}
height={100}
@@ -132,13 +143,17 @@ export function OurService() {
</div>
<div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-5 mt- w-full mx-auto">
<motion.div variants={cardVariants} className="sm:w-[40%] w-full -mt-5">
<motion.div
variants={cardVariants}
onClick={() => setServiceId(data[2].id)}
className="sm:w-[40%] w-full -mt-5"
>
<Link
href={`/${locale}/services/detail`}
className="block hover:cursor-pointer relative rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300"
>
<Image
src="/images/home/ambulance.png"
src={data[2].main_image}
alt="images"
width={300}
height={200}
@@ -146,10 +161,10 @@ export function OurService() {
/>
<div className="space-y-4 py-6 px-8">
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
{t("home.services.services.safety.title")}
{data[2].title}
</p>
<p className="font-almarai text-gray-400 max-w-80 w-full">
{t("home.services.services.safety.description")}
{data[2].subtitle}
</p>
<button className="font-almarai text-[#dc2626] font-semibold flex items-center gap-2 text-sm hover:gap-3 transition-all">
{t("home.services.learnmore")} <ChevronRight size={20} />
@@ -159,20 +174,24 @@ export function OurService() {
</motion.div>
<div className="sm:w-[60%] w-full">
<motion.div variants={cardVariants}>
<motion.div
onClick={() => setServiceId(data[3].id)}
variants={cardVariants}
>
<Link href={`/${locale}/services/detail`}>
<div className="hover:cursor-pointer relative overflow-hidden space-y-4 py-6 px-8 rounded-xl w-full bg-[linear-gradient(to_bottom_right,#000000,#190b00,#542604,#8f4308)] hover:shadow-2xl hover:shadow-red-500/20 transition-all duration-300">
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
{t("home.services.services.monitoring.title")}
{data[3].title}
</p>
<p className="font-almarai text-gray-400 max-w-70 w-full">
{t("home.services.services.monitoring.description")}
{data[3].subtitle}
</p>
<button className="font-almarai sm:mt-38 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 className="font-almarai sm:mt-35 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>
<Image
src="/images/home/balon.png"
src={data[3].main_image}
alt="images"
width={200}
height={100}
@@ -184,7 +203,7 @@ export function OurService() {
<motion.div
variants={cardVariants}
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"
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"
>
<h2 className="font-unbounded sm:text-3xl text-xl font-semibold font-armanai text-white">
{t("home.services.viewMoreServices")}
@@ -203,4 +222,4 @@ export function OurService() {
</div>
</div>
);
}
}

2
components/pages/subCategory/card.tsx
View File

@@ -50,7 +50,7 @@ export default function Card({
{/* 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>