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 { useTranslation } from "react-i18next";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
|
|
||||||
interface Data {
|
const SupportAgency = () => {
|
||||||
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 [query, setQuery] = useState("");
|
const [query, setQuery] = useState("");
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
const [selected, setSelected] = useState<GetSupportAgencyRes | null>(null);
|
const [selected, setSelected] = useState<GetSupportAgencyRes | null>(null);
|
||||||
|
|||||||
Reference in New Issue
Block a user