Untitled
unknown
plain_text
a year ago
4.4 kB
6
Indexable
'use client'; import GlobalLoading from '@/components/Global/GlobalLoading'; import { xoomBackendUrl } from '@/lib/axios/getAxios'; import moment from 'moment'; import Image from 'next/image'; import Link from 'next/link'; import { useQuery } from 'react-query'; export default function NewsHome() { // Fetch all News Data const { isLoading: isLoadingNews, data: newsData, refetch: refetchNews, } = useQuery( `news-data`, async () => { const response = await xoomBackendUrl.get(`/api/news`); if (response.status === 200) { // setIsRefetching(false); return response.data?.data; } else { throw new Error('Failed to fetch all Leagues data'); } }, { cacheTime: 0, } ); if (isLoadingNews) { return <GlobalLoading />; } if (!newsData || newsData.length === 0) { return ( <div className="bg-black h-[250px] grid grid-cols-1 content-center -skew-y-[0.5deg]"> <div className="p-2 font-medium text-center text-gray-300 skew-y-[0.5deg]"> No news found at the moment. Stay tuned for updates! </div> </div> ); } const truncate = (input) => input?.length > 70 ? `${input.substring(0, 70)}...` : input; return ( <div className='-mt-4 sm:-mt-0 news_section'> <Link href={`/news/${newsData[0]?.slug}`}> <div className="bg-warning h-[410px] sm:h-[250px] grid grid-cols-1 content-center -skew-y-[2deg] sm:-skew-y-[0.5deg]"> <div className="flex flex-col sm:grid grid-cols-2 gap-6 bg-none rounded-none text-black sm:text-white sm:px-10 py-10"> <div className="w-full sm:w-72 h-full skew-y-[2deg] sm:skew-y-[0.5deg] mt-[64px] sm:mt-0 sm:py-[4px] relative "> <Image src={newsData[0]?.image} alt="HighlightImg" width={100} height={100} className="w-full sm:h-44 md:w-72 p-0 sm:p-[7px]" sizes="100vw" /> <div className="absolute -bottom-3 sm:bottom-0 right-0 me-7 "> <h2 className="animate-pulse text-white bg-red-500 px-2 font-bold"> EXCLUSIVE </h2> </div> </div> <div className="my-12 pb-4 sm:my-8 -mt-2 ml-2 sm:ml-10 skew-y-[2deg] sm:skew-y-[0.5deg]"> <h2 className="card-title text-sm"> {truncate(newsData[0]?.title)} </h2> <small className='text-[11px] font-normal mt-3 sm:mt-0'>{moment(newsData[0]?.publish_date, 'YYYY-MM-DD HH:mm').format('ddd, DD MMM YYYY')}</small> </div> </div> </div> </Link> <div className="py-2 mt-8 "> <h4 className="font-semibold ml-2">TOP STORIES</h4> <div className=" sm:grid sm:grid-cols-2 sm:gap-7 ml-2 sm:ml-0"> {newsData.slice(1).map((news) => ( <div key={news._id}> <Link href={`/news/${news?.slug}`}> <div className="card rounded-none flex flex-row sm:flex-col"> <div className="bg-black sm:w-full -skew-y-[3deg] sm:-skew-y-[0.5deg] mb-7 sm:mb-0 "> <figure> <Image src={news?.image} alt="HighlightImg" width={100} height={100} className="max-w-fit sm:w-72 sm:h-44 skew-y-[0.5deg] py-[4px]" sizes="sm:100vw" /> </figure> </div> <div className="flex items-center mx-5 sm:mx-0 -mt-5 sm:-mt-0"> <div className="ml-0"> <h2 className="text-sm font-semibold my-0 sm:my-2 md:ps-5 lg:ps-0"> {news?.title.length > 50 ? news?.title.slice(0, 50) : news?.title} ... </h2> <small className='md:ps-5 lg:ps-0 text-[11px] text-start font-normal mt-0 sm:mt-0 text-base-00'> {moment(news?.publish_date, 'YYYY-MM-DD HH:mm').format('ddd, DD MMM YYYY')} </small> </div> </div> </div> </Link> </div> ))} </div> </div> </div> ); }
Editor is loading...
Leave a Comment