Davron/ignum
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

show case slider connected to backend

Browse Source
This commit is contained in:
nabijonovdavronbek619@gmail.com
2026-03-05 10:50:24 +05:00
parent a6c1e4644a
commit dad1070807
6 changed files with 102 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
components/layout/navbar.tsx
View File

@@ -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 && (
<DropdownMenuContent className="space-y-2">
{item.children.map((child: NavbarItem) => (
<Link
key={child.id}
href={`/${locale}/${child.url}`}
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
>
{child.name}
</Link>
<DropdownMenuItem asChild key={child.id}>
<Link
href={`/${locale}/${child.url}`}
className="font-unbounded uppercase text-white text-sm h-full flex items-center font-semibold hover:cursor-pointer hover:text-red-500 transition"
>
{child.name}
</Link>
</DropdownMenuItem>
))}
</DropdownMenuContent>
)}

68
components/pages/home/banner/loading.tsx Normal file
View File

@@ -0,0 +1,68 @@
export function BannerSliderSkeleton() {
return (
<div className="max-w-7xl mx-auto relative z-30 h-full mt-20 flex items-center justify-center">
{/* Fake nav buttons */}
<div className="w-10 h-10 absolute z-10 left-[5%] top-[40vh] rounded-full bg-gray-700/50 lg:flex hidden animate-pulse" />
<div className="w-10 h-10 absolute z-10 right-[5%] top-[40vh] rounded-full bg-gray-700/50 lg:flex hidden animate-pulse" />
{/* Slide content */}
<div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh] w-full">
<div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-center h-full">
{/* Mobile text skeleton (hidden on lg) */}
<div className="lg:hidden space-y-6">
{/* Badge */}
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-gray-600 animate-pulse" />
<div className="h-4 w-32 rounded-full bg-gray-600 animate-pulse" />
</div>
{/* Heading */}
<div className="space-y-3">
<div className="h-8 w-4/5 rounded-lg bg-gray-600 animate-pulse" />
<div className="h-8 w-3/5 rounded-lg bg-gray-600 animate-pulse" />
</div>
{/* Description */}
<div className="space-y-2">
<div className="h-4 w-full rounded bg-gray-700 animate-pulse" />
<div className="h-4 w-11/12 rounded bg-gray-700 animate-pulse" />
<div className="h-4 w-3/4 rounded bg-gray-700 animate-pulse" />
</div>
{/* CTA */}
<div className="h-12 w-40 rounded-full bg-red-900/40 animate-pulse" />
</div>
{/* Image skeleton */}
<div className="flex items-end justify-center">
<div className="lg:w-[375px] w-[250px] lg:h-[375px] h-[250px] max-[300px]:w-[80vw] rounded-xl bg-gray-700/50 animate-pulse shimmer" />
</div>
{/* Desktop text skeleton (hidden on mobile) */}
<div className="lg:inline-block hidden space-y-6 mb-20">
{/* Badge */}
<div className="flex items-center gap-2">
<div className="w-3 h-3 rounded-full bg-gray-600 animate-pulse" />
<div className="h-4 w-36 rounded-full bg-gray-600 animate-pulse" />
</div>
{/* Heading */}
<div className="space-y-3">
<div className="h-10 w-4/5 rounded-lg bg-gray-600 animate-pulse" />
<div className="h-10 w-3/5 rounded-lg bg-gray-600 animate-pulse" />
<div className="h-10 w-2/5 rounded-lg bg-gray-600 animate-pulse" />
</div>
{/* Description */}
<div className="space-y-2 max-w-md">
<div className="h-4 w-full rounded bg-gray-700 animate-pulse" />
<div className="h-4 w-11/12 rounded bg-gray-700 animate-pulse" />
<div className="h-4 w-3/4 rounded bg-gray-700 animate-pulse" />
</div>
{/* CTA */}
<div className="h-12 w-40 rounded-full bg-red-900/40 animate-pulse" />
</div>
</div>
</div>
</div>
</div>
);
}

21
components/pages/home/banner/slider.tsx
View File

@@ -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 <BannerSliderSkeleton />;
return (
<div className="max-w-7xl mx-auto relative z-30 h-full mt-20 flex items-center justify-center ">
{/* 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`}
>
<ChevronLeft size={30} />
</button>
@@ -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 `}
>
<ChevronRight size={30} />
</button>
@@ -62,7 +77,7 @@ export function BannerSlider() {
disableOnInteraction: false,
}}
>
{BANNER_DATA.map((item, index) => (
{bannerData.map((item, index) => (
<SwiperSlide key={index}>
<div className="relative z-20 h-full flex items-center lg:mt-0 sm:mt-[10vh] mt-[5vh]">
<div className="max-w-400 mx-auto px-4 sm:px-6 lg:px-8 w-full">

2
components/pages/services/servicePageServices.tsx
View File

@@ -41,8 +41,6 @@ export function ServicePageServices() {
},
});
console.log("service page services: ", data);
return (
<div className="bg-[#1e1d1c] py-10 md:py-16 lg:py-20 mb-15">
<div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8">

7
lib/types.ts
View File

@@ -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;
}

2
request/links.ts
View File

@@ -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/",