64 lines
1.6 KiB
TypeScript
64 lines
1.6 KiB
TypeScript
'use client';
|
|
import React from 'react';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import { Autoplay, Navigation, Pagination } from 'swiper/modules';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
|
|
// Định nghĩa kiểu dữ liệu cho mỗi Banner
|
|
interface BannerItem {
|
|
id: number;
|
|
link: string;
|
|
imageSrc: string;
|
|
altText: string;
|
|
}
|
|
|
|
// Dữ liệu mẫu (Bạn có thể fetch từ API)
|
|
const BANNER_DATA: BannerItem[] = [
|
|
{
|
|
id: 429,
|
|
link: '/ad.php?id=429',
|
|
imageSrc: 'https://nguyencongpc.vn/media/banner/01_Decc0f3e158e61fabaf09a74d48e1c357bd.webp',
|
|
altText: 'banner 1',
|
|
},
|
|
{
|
|
id: 392,
|
|
link: '/ad.php?id=392',
|
|
imageSrc: 'https://nguyencongpc.vn/media/banner/01_Dec383fdcbc6361363bd6d14f05d2c88ee2.webp',
|
|
altText: 'banner 2',
|
|
},
|
|
];
|
|
|
|
const HeaderSlider: React.FC = () => {
|
|
return (
|
|
<div className="header-top">
|
|
<Swiper
|
|
modules={[Autoplay, Navigation, Pagination]}
|
|
spaceBetween={12}
|
|
slidesPerView={1}
|
|
loop={true}
|
|
className="mySwiper"
|
|
>
|
|
{BANNER_DATA.map((banner) => (
|
|
<SwiperSlide key={banner.id}>
|
|
<div className="item">
|
|
<Link href={banner.link} className="item-banner boder-radius-10">
|
|
<Image
|
|
src={banner.imageSrc}
|
|
width={1909}
|
|
height={57}
|
|
alt={banner.altText}
|
|
priority={true}
|
|
className="h-auto w-full object-cover"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HeaderSlider;
|