86 lines
2.3 KiB
TypeScript
86 lines
2.3 KiB
TypeScript
"use client";
|
|
import { Counter } from "@/components/Counter";
|
|
import httpClient from "@/request/api";
|
|
import { endPoints } from "@/request/links";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { useTranslations } from "next-intl";
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface Statistics {
|
|
id: number;
|
|
number: number;
|
|
hint: string;
|
|
description: string;
|
|
}
|
|
|
|
export function Statistics() {
|
|
const t = useTranslations();
|
|
const stats = [
|
|
{
|
|
id: 1,
|
|
number: 25,
|
|
hint: "+",
|
|
description: t("home.statistics.experience"),
|
|
},
|
|
{
|
|
id: 2,
|
|
number: 450,
|
|
hint: "+",
|
|
description: t("home.statistics.projectsCompleted"),
|
|
},
|
|
{
|
|
id: 3,
|
|
number: 99,
|
|
hint: "+",
|
|
description: t("home.statistics.trainedSpecialists"),
|
|
},
|
|
{
|
|
id: 4,
|
|
number: 93,
|
|
hint: "%",
|
|
description: t("home.statistics.trustedClients"),
|
|
},
|
|
];
|
|
const [stat, setStat] = useState<Statistics[]>(stats);
|
|
|
|
const { data } = useQuery({
|
|
queryKey: ["statistics"],
|
|
queryFn: () => httpClient(endPoints.statistics),
|
|
select: (data) => data?.data?.results,
|
|
});
|
|
|
|
useEffect(() => {
|
|
data && setStat(data);
|
|
}, [data]);
|
|
|
|
return (
|
|
<section className="w-full bg-black">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 lg:gap-12">
|
|
{stat.map((stat, index) => (
|
|
<div
|
|
key={index}
|
|
className="flex flex-col items-center justify-center py-10 sm:py-20 lg:py-15 border-b-red-600 border-b"
|
|
>
|
|
{/* Number and Symbol */}
|
|
<div className="flex items-baseline gap-2 font-almarai">
|
|
<span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-white">
|
|
<Counter countNum={Number(stat.number)} />
|
|
</span>
|
|
<span className="text-4xl sm:text-5xl lg:text-6xl font-bold text-red-600">
|
|
{stat.hint}
|
|
</span>
|
|
</div>
|
|
|
|
{/* Label */}
|
|
<p className="font-almarai text-sm sm:text-base text-gray-300 mt-4 text-center font-medium">
|
|
{stat.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|