From dad1070807bbdd76422b9e4072e7ea21d1fdd1ca Mon Sep 17 00:00:00 2001 From: "nabijonovdavronbek619@gmail.com" Date: Thu, 5 Mar 2026 10:50:24 +0500 Subject: [PATCH] show case slider connected to backend --- components/layout/navbar.tsx | 24 +++---- components/pages/home/banner/loading.tsx | 68 +++++++++++++++++++ components/pages/home/banner/slider.tsx | 21 +++++- .../pages/services/servicePageServices.tsx | 2 - lib/types.ts | 7 ++ request/links.ts | 2 +- 6 files changed, 102 insertions(+), 22 deletions(-) create mode 100644 components/pages/home/banner/loading.tsx diff --git a/components/layout/navbar.tsx b/components/layout/navbar.tsx index 6e7d6f6..fd08436 100644 --- a/components/layout/navbar.tsx +++ b/components/layout/navbar.tsx @@ -33,15 +33,6 @@ export function Navbar() { }), }); - console.log({ navbarItems }); - - const tabs = [ - { name: t("navbar.about"), value: "" }, - { name: t("about.subPages.baza"), value: "baza" }, - { name: t("about.subPages.certificate"), value: "sertificate" }, - { name: t("about.subPages.notePP"), value: "notePP" }, - ]; - useEffect(() => { const handleScroll = () => { setScrolled(window.scrollY > 50); @@ -110,13 +101,14 @@ export function Navbar() { {item.children.length > 0 && ( {item.children.map((child: NavbarItem) => ( - - {child.name} - + + + {child.name} + + ))} )} diff --git a/components/pages/home/banner/loading.tsx b/components/pages/home/banner/loading.tsx new file mode 100644 index 0000000..819deaf --- /dev/null +++ b/components/pages/home/banner/loading.tsx @@ -0,0 +1,68 @@ +export function BannerSliderSkeleton() { + return ( +
+ {/* Fake nav buttons */} +
+
+ + {/* Slide content */} +
+
+
+ + {/* Mobile text skeleton (hidden on lg) */} +
+ {/* Badge */} +
+
+
+
+ {/* Heading */} +
+
+
+
+ {/* Description */} +
+
+
+
+
+ {/* CTA */} +
+
+ + {/* Image skeleton */} +
+
+
+ + {/* Desktop text skeleton (hidden on mobile) */} +
+ {/* Badge */} +
+
+
+
+ {/* Heading */} +
+
+
+
+
+ {/* Description */} +
+
+
+
+
+ {/* CTA */} +
+
+ +
+
+
+
+ ); +} \ No newline at end of file diff --git a/components/pages/home/banner/slider.tsx b/components/pages/home/banner/slider.tsx index d12cf08..1b16cf4 100644 --- a/components/pages/home/banner/slider.tsx +++ b/components/pages/home/banner/slider.tsx @@ -9,6 +9,11 @@ import Image from "next/image"; import Link from "next/link"; import { useLocale, useTranslations } from "next-intl"; import DotAnimatsiya from "@/components/dot/DotAnimatsiya"; +import { useQuery } from "@tanstack/react-query"; +import httpClient from "@/request/api"; +import { endPoints } from "@/request/links"; +import { BannerType } from "@/lib/types"; +import { BannerSliderSkeleton } from "./loading"; // The custom CSS selectors for navigation const navigationPrevEl = ".hero-swiper-prev"; const navigationNextEl = ".hero-swiper-next"; @@ -16,6 +21,11 @@ const navigationNextEl = ".hero-swiper-next"; export function BannerSlider() { const t = useTranslations(); const locale = useLocale(); + const { data, isLoading } = useQuery({ + queryKey: ["banner"], + queryFn: () => httpClient(endPoints.banner), + select: (data: any): BannerType[] => data?.data?.results, + }); const BANNER_DATA = [ { image: "/images/homeBanner3.png", @@ -28,6 +38,11 @@ export function BannerSlider() { description: t("home.banner.description"), }, ]; + + const bannerData = data ?? BANNER_DATA; + + if (isLoading) return ; + return (
{/* Custom buttons */} @@ -35,7 +50,7 @@ export function BannerSlider() { className={`${navigationPrevEl.replace( ".", "", - )} w-10 h-10 absolute z-10 left-[5%] top-[40vh] rounded-full p-0 bg-primary text-center text-white lg:flex hidden items-center justify-center hover:bg-red-600 hover:cursor-pointer transition`} + )} w-10 h-10 absolute z-10 left-0 top-[40vh] rounded-full p-0 bg-primary text-center text-white lg:flex hidden items-center justify-center hover:bg-red-600 hover:cursor-pointer transition`} > @@ -43,7 +58,7 @@ export function BannerSlider() { className={`${navigationNextEl.replace( ".", "", - )} w-10 h-10 absolute z-10 right-[5%] top-[40vh] rounded-full bg-primary text-center text-white lg:flex hidden items-center justify-center hover:bg-red-600 hover:cursor-pointer transition `} + )} w-10 h-10 absolute z-10 right-0 top-[40vh] rounded-full bg-primary text-center text-white lg:flex hidden items-center justify-center hover:bg-red-600 hover:cursor-pointer transition `} > @@ -62,7 +77,7 @@ export function BannerSlider() { disableOnInteraction: false, }} > - {BANNER_DATA.map((item, index) => ( + {bannerData.map((item, index) => (
diff --git a/components/pages/services/servicePageServices.tsx b/components/pages/services/servicePageServices.tsx index c205a3d..e97a457 100644 --- a/components/pages/services/servicePageServices.tsx +++ b/components/pages/services/servicePageServices.tsx @@ -41,8 +41,6 @@ export function ServicePageServices() { }, }); - console.log("service page services: ", data); - return (
diff --git a/lib/types.ts b/lib/types.ts index 1a4b74d..232aa36 100644 --- a/lib/types.ts +++ b/lib/types.ts @@ -47,3 +47,10 @@ export interface NavbarItem { open_in_new_tab: boolean; children: NavbarItem[]; } + +export interface BannerType { + id: number; + image: string; + title: string; + description: string; +} diff --git a/request/links.ts b/request/links.ts index 17c0554..e4b30f2 100644 --- a/request/links.ts +++ b/request/links.ts @@ -35,7 +35,7 @@ export const endPoints = { gallery: "gallery/?page_size=500", contact: "contact/", statistics: "statistics/", - banner: "banner/", + banner: "banner/?page_size=500", navbar:"navigationitem/?page_size=500", filter: { size: "size/",