api ulandi
This commit is contained in:
Samandar Turgunboyev
@@ -1,112 +0,0 @@
|
||||
"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;
|
||||
@@ -8,46 +8,7 @@ import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
interface Data {
|
||||
id: number;
|
||||
name: string;
|
||||
address: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
instagram: string;
|
||||
web_site: string;
|
||||
documents: string[];
|
||||
}
|
||||
|
||||
const sampleData: Data[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Alpha Travel",
|
||||
address: "Tashkent, Mustaqillik ko'chasi 12",
|
||||
email: "alpha@example.com",
|
||||
phone: "+998901234567",
|
||||
instagram: "https://instagram.com/alphatravel",
|
||||
web_site: "https://alphatravel.uz",
|
||||
documents: [
|
||||
"https://turan-travel.com/uploads/files/license/sertificate.jpg",
|
||||
"https://turan-travel.com/uploads/files/license/sertificate.jpg",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Samarkand Tours",
|
||||
address: "Samarkand, Registon 5",
|
||||
email: "info@samarktours.uz",
|
||||
phone: "+998903334455",
|
||||
instagram: "https://instagram.com/samarktours",
|
||||
web_site: "https://samarktours.uz",
|
||||
documents: [
|
||||
"https://turan-travel.com/uploads/files/license/sertificate.jpg",
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const SupportAgency = ({ requests = sampleData }) => {
|
||||
const SupportAgency = () => {
|
||||
const [query, setQuery] = useState("");
|
||||
const { t } = useTranslation();
|
||||
const [selected, setSelected] = useState<GetSupportAgencyRes | null>(null);
|
||||
|
||||
Reference in New Issue
Block a user