45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
"use client";
|
|
import { Queries } from "@/api/queries";
|
|
import { useInfiniteQuery } from "@tanstack/react-query";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import Loader from "../Loader";
|
|
import baseUrl from "@/baseUrl";
|
|
|
|
const MainNews = () => {
|
|
const { data, isLoading, error } = useInfiniteQuery({
|
|
queryKey: ["news", "infinite"],
|
|
queryFn: ({ pageParam = 1 }) => Queries.getNews(pageParam, {}),
|
|
getNextPageParam: (prevData) =>
|
|
prevData.meta.last_page > prevData.meta.current_page
|
|
? prevData.meta.current_page + 1
|
|
: null,
|
|
});
|
|
|
|
const news = data!.pages.flatMap((data) => data.data)[0];
|
|
|
|
if (isLoading) return <Loader />;
|
|
if (error) return <h1>{JSON.stringify(error)}</h1>;
|
|
|
|
return (
|
|
<Link href={`/news/${news.id}`} className="main-news flex flex-col gap-6">
|
|
<div className="w-full max-h-[250px] h-full">
|
|
<Image
|
|
src={news.featured_images[0].path}
|
|
alt={news.title}
|
|
unoptimized
|
|
unselectable="off"
|
|
width={1000}
|
|
height={250}
|
|
className="w-full object-cover h-[250px]"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-3 text-black text-lg">
|
|
<h2 className="font-mw_sans font-bold">{news.title}</h2>
|
|
</div>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default MainNews;
|