223 lines
10 KiB
TypeScript
223 lines
10 KiB
TypeScript
"use client";
|
|
import DotAnimatsiya from "@/components/dot/DotAnimatsiya";
|
|
import httpClient from "@/request/api";
|
|
import { endPoints } from "@/request/links";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { ChevronRight } from "lucide-react";
|
|
import { useLocale, useTranslations } from "next-intl";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { motion } from "framer-motion";
|
|
import { ServicesLoading } from "./loading";
|
|
import { EmptyServices } from "./empty";
|
|
import { useServiceDetail } from "@/store/useService";
|
|
import { cardVariants, containerVariants } from "@/lib/animations";
|
|
|
|
export function ServicePageServices() {
|
|
const t = useTranslations();
|
|
const locale = useLocale();
|
|
const setServiceId = useServiceDetail((state) => state.setServiceId);
|
|
|
|
// get request
|
|
const { data, isLoading, isError } = useQuery({
|
|
queryKey: ["firesafety"],
|
|
queryFn: () => httpClient(endPoints.services.all),
|
|
select: (data) => {
|
|
const serviceData = data?.data?.data?.results;
|
|
return serviceData.reduce(
|
|
(resultArray: any, item: any, index: number) => {
|
|
const chunkIndex = Math.floor(index / 4);
|
|
|
|
if (!resultArray[chunkIndex]) {
|
|
resultArray[chunkIndex] = []; // Yangi chunk boshlash
|
|
}
|
|
|
|
resultArray[chunkIndex].push(item);
|
|
|
|
return resultArray;
|
|
},
|
|
[] as any[][],
|
|
);
|
|
},
|
|
});
|
|
|
|
console.log("service page services: ", data);
|
|
|
|
return (
|
|
<div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-15">
|
|
<div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">
|
|
{/* Header for github */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: -20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
className="space-y-4 md:space-y-6"
|
|
>
|
|
<div className="font-almarai flex items-center justify-center gap-2 text-base sm:text-lg md:text-xl text-white font-bold">
|
|
<DotAnimatsiya />
|
|
{t("home.services.title")}
|
|
</div>
|
|
<h1 className="uppercase font-unbounded text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl tracking-wider lg:tracking-[5px] font-bold bg-linear-to-br from-white via-white to-gray-400 text-transparent bg-clip-text text-center w-full">
|
|
{t("home.services.subtitle")}
|
|
</h1>
|
|
<p className="font-almarai text-center text-sm sm:text-base md:text-lg text-gray-400 max-w-4xl mx-auto px-4">
|
|
{t("home.services.description")}
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Conditional Rendering */}
|
|
{isLoading ? (
|
|
<div className="my-10">
|
|
<ServicesLoading />
|
|
</div>
|
|
) : !data || (Array.isArray(data) && data.length === 0) ? (
|
|
<div className="my-10">
|
|
<EmptyServices />
|
|
</div>
|
|
) : (
|
|
data.map((item: any, index: number) => (
|
|
<motion.div
|
|
key={index}
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
{/* cards */}
|
|
<div className="max-w-250 w-full mx-auto overflow-hidden flex sm:flex-row flex-col items-center gap-3 my-4">
|
|
{item[0] && (
|
|
<motion.div
|
|
variants={cardVariants}
|
|
className="sm:w-[55%] overflow-hidden w-full"
|
|
onClick={() => setServiceId(item[0].id)}
|
|
>
|
|
<Link
|
|
href={`/${locale}/services/detail`}
|
|
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">
|
|
{item[0]?.title}
|
|
</p>
|
|
<p className="font-almarai text-gray-400 max-w-80 w-full">
|
|
{item[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={item[0]?.main_image}
|
|
alt="images"
|
|
width={200}
|
|
height={100}
|
|
className="object-contain sm:absolute bottom-0 -right-2 z-10"
|
|
/>
|
|
</Link>
|
|
</motion.div>
|
|
)}
|
|
|
|
{item[1] && (
|
|
<Link
|
|
href={`/${locale}/services/detail`}
|
|
className="sm:w-[45%] w-full"
|
|
>
|
|
<motion.div
|
|
onClick={() => setServiceId(item[1]?.id)}
|
|
variants={cardVariants}
|
|
>
|
|
<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">
|
|
{item[1]?.title}
|
|
</p>
|
|
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
|
{item[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={item[1]?.main_image}
|
|
alt="images"
|
|
width={200}
|
|
height={100}
|
|
className="object-contain sm:absolute -bottom-4 -right-4 z-10"
|
|
/>
|
|
</div>
|
|
</motion.div>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
|
|
<div className="max-w-250 flex sm:flex-row flex-col items-start justify-between gap-3 w-full mx-auto">
|
|
{item[2] && (
|
|
<motion.div
|
|
variants={cardVariants}
|
|
onClick={() => setServiceId(item[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={item[2]?.main_image}
|
|
alt="images"
|
|
width={250}
|
|
height={200}
|
|
className="object-contain mt-5"
|
|
/>
|
|
<div className="space-y-1 pb-3 px-5">
|
|
<p className="uppercase font-unbounded font-bold bg-linear-to-br from-white via-white to-black text-transparent bg-clip-text">
|
|
{item[2]?.title}
|
|
</p>
|
|
<p className="font-almarai text-gray-400 max-w-80 w-full">
|
|
{item[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} />
|
|
</button>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
)}
|
|
|
|
<div className="sm:w-[60%] w-full">
|
|
{item[3] && (
|
|
<motion.div
|
|
onClick={() => setServiceId(item[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">
|
|
{item[3]?.title}
|
|
</p>
|
|
<p className="font-almarai text-gray-400 max-w-70 w-full">
|
|
{item[3]?.subtitle}
|
|
</p>
|
|
<button className="font-almarai sm:mt-40 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={item[3]?.main_image}
|
|
alt="images"
|
|
width={200}
|
|
height={100}
|
|
className="object-contain sm:absolute -bottom-20 -right-4 max-sm:-mb-20 z-10"
|
|
/>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|