46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { Queries } from '@/api/queries';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import Marquee from 'react-fast-marquee';
|
|
import Loader from '../Loader';
|
|
import { v4 } from 'uuid';
|
|
import channels from '@/channels';
|
|
|
|
const Marque = () => {
|
|
const { data, isFetching, error } = useQuery({
|
|
queryKey: ['marquee'],
|
|
queryFn: () => Queries.getMarquee(),
|
|
});
|
|
|
|
if (isFetching) return <Loader height={'100%'} />;
|
|
if (error) return <h1>{JSON.stringify(error)}</h1>;
|
|
|
|
return data?.data ? (
|
|
<div className="flex w-full items-center z-50 lg:fixed lg:bottom-0 lg:left-0">
|
|
{data.data.length === 0 ? null : (
|
|
<div className="relative w-full flex">
|
|
<div className="w-fit absolute top-[50%] translate-y-[-50%] left-0 bg-mred font-roboto text-white font-bold text-base z-20">
|
|
<span className=" py-1 px-4 block">Gysga Habarlar</span>
|
|
</div>
|
|
<Marquee
|
|
direction="left"
|
|
loop={0}
|
|
speed={30}
|
|
pauseOnHover
|
|
className="w-full flex gap-4 bg-[#BBBB] z-10 lg:my-[11px]"
|
|
gradient={false}>
|
|
{data?.data.map((item) => (
|
|
<div className="mr-10 py-1" key={v4()}>
|
|
{item.content}
|
|
</div>
|
|
))}
|
|
</Marquee>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : null;
|
|
};
|
|
|
|
export default Marque;
|