113 lines
3.8 KiB
TypeScript
113 lines
3.8 KiB
TypeScript
"use client";
|
|
|
|
import { getBanner } from "@/pages/site-banner/lib/api";
|
|
import { Card } from "@/shared/ui/card";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
CarouselNext,
|
|
CarouselPrevious,
|
|
} from "@/shared/ui/carousel";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { AlertTriangle, Loader2, MoveRightIcon } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Link } from "react-router-dom";
|
|
|
|
const BannerCarousel = () => {
|
|
const { t } = useTranslation();
|
|
|
|
// 🧠 Bannerlarni backenddan olish
|
|
const { data, isLoading, isError, refetch } = useQuery({
|
|
queryKey: ["all_banner"],
|
|
queryFn: () => getBanner(),
|
|
select: (res) =>
|
|
res.data.data.results.filter((b) => b.position === "banner1"),
|
|
});
|
|
|
|
const colors = ["#EDF5C7", "#F5DCC7"];
|
|
|
|
if (isLoading)
|
|
return (
|
|
<div className="flex items-center justify-center min-h-[400px]">
|
|
<Loader2 className="animate-spin text-blue-500 w-8 h-8" />
|
|
</div>
|
|
);
|
|
|
|
if (isError)
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-[400px] text-white">
|
|
<AlertTriangle className="text-red-500 w-8 h-8 mb-2" />
|
|
<p>{t("Ma'lumotlarni yuklashda xatolik yuz berdi.")}</p>
|
|
<button
|
|
onClick={() => refetch()}
|
|
className="mt-3 bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-lg"
|
|
>
|
|
{t("Qayta urinish")}
|
|
</button>
|
|
</div>
|
|
);
|
|
|
|
if (!data || data.length === 0)
|
|
return (
|
|
<div className="flex items-center justify-center text-gray-400 min-h-[400px]">
|
|
{t("Hozircha bannerlar mavjud emas")}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="mt-10 max-lg:hidden custom-container">
|
|
<Carousel opts={{ loop: true, align: "start" }}>
|
|
<CarouselContent>
|
|
{data.map((banner, index) => (
|
|
<CarouselItem
|
|
key={banner.id}
|
|
className="basis-full md:basis-[80%] shrink-0"
|
|
>
|
|
<div className="h-[500px]">
|
|
<Card className="h-full !rounded-[50px] flex border-none items-center justify-start relative overflow-hidden">
|
|
{/* <BannerCircle
|
|
color={colors[index % colors.length]}
|
|
className="w-[60%] h-full absolute z-10"
|
|
/> */}
|
|
|
|
{/* Matn qismi */}
|
|
<div className="flex flex-col gap-6 w-96 z-20 absolute left-14 top-1/2 -translate-y-1/2">
|
|
<p className="text-4xl font-semibold text-[#232325]">
|
|
{banner.title}
|
|
</p>
|
|
<p className="text-[#212122] font-medium">
|
|
{banner.description}
|
|
</p>
|
|
<Link
|
|
to={banner.link || "#"}
|
|
className="bg-white text-[#212122] font-semibold flex gap-4 px-8 py-4 shadow-sm !rounded-4xl w-fit"
|
|
>
|
|
<p>{t("Batafsil")}</p>
|
|
<MoveRightIcon />
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Rasm qismi */}
|
|
<div className="absolute right-0 w-[50%] h-full">
|
|
<img
|
|
src={banner.image}
|
|
alt={banner.title}
|
|
className="object-cover w-full h-full"
|
|
/>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
|
|
<CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 size-10 rounded-full shadow z-10" />
|
|
<CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white p-2 rounded-full size-10 shadow z-10" />
|
|
</Carousel>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default BannerCarousel;
|