45 lines
1.4 KiB
TypeScript
45 lines
1.4 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import Image from 'next/image';
|
||
|
|
import { Queries } from '@/api/queries';
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
import Loader from '../Loader';
|
||
|
|
import Link from 'next/link';
|
||
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
||
|
|
import { Autoplay, Navigation, Pagination } from 'swiper';
|
||
|
|
import { v4 } from 'uuid';
|
||
|
|
|
||
|
|
const Banner = () => {
|
||
|
|
const { data, isFetching, error } = useQuery({
|
||
|
|
queryKey: ['channel_description'],
|
||
|
|
queryFn: () => Queries.getBanner(),
|
||
|
|
});
|
||
|
|
|
||
|
|
// if (isFetching) return <Loader height={'100%'} />;
|
||
|
|
if (error) return <h1>{JSON.stringify(error)}</h1>;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<aside className="live-aside max-w-[200px] w-full lg:block hidden relative">
|
||
|
|
{data?.data ? (
|
||
|
|
<Swiper
|
||
|
|
modules={[Pagination, Autoplay]}
|
||
|
|
slidesPerView={1}
|
||
|
|
autoplay={{ delay: 3200 }}
|
||
|
|
speed={700}
|
||
|
|
loop
|
||
|
|
pagination={{ clickable: true }}
|
||
|
|
className="w-full">
|
||
|
|
{data!.data.map((item) => (
|
||
|
|
<SwiperSlide key={v4()} className="w-[200px] h-[400px]">
|
||
|
|
<Link href={item.url} className="w-full h-full" target="_blank">
|
||
|
|
<Image src={item.img_url} unoptimized alt={item.alt} fill priority className="" />
|
||
|
|
</Link>
|
||
|
|
</SwiperSlide>
|
||
|
|
))}
|
||
|
|
</Swiper>
|
||
|
|
) : null}
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Banner;
|