fix the PR gated

This commit is contained in:
Yifei Hu 2024-07-10 12:14:46 +08:00
parent bf170a0ad8
commit fc091da03c

View file

@ -40,29 +40,33 @@ const NewsPage = () => {
fetchNews();
}, []);
const renderContent = () => {
if (loading) {
return (
<div>
<div className="fixed z-40 top-0 left-0 right-0 lg:pl-[104px] lg:pr-6 lg:px-8 px-4 py-4 lg:py-6 border-b border-light-200 dark:border-dark-200">
<div className="flex flex-row items-center space-x-2 max-w-screen-lg lg:mx-auto">
<Newspaper />
<h2 className="text-black dark:text-white lg:text-3xl lg:font-medium">News</h2>
</div>
</div>
{loading ? (
<div className="flex flex-row items-center justify-center min-h-screen">
<p className="text-black/70 dark:text-white/70 text-sm">Loading news...</p>
</div>
) : error ? (
);
}
if (error) {
return (
<div className="flex flex-col items-center justify-center min-h-screen">
<p className="text-red-500 text-sm mb-2">Failed to load news.</p>
<p className="text-red-500 text-xs">{error}</p>
</div>
) : (
<div className="flex flex-col pt-16 lg:pt-24">
{news.length === 0 ? (
);
}
if (news.length === 0) {
return (
<p className="text-black/70 dark:text-white/70 text-sm text-center">No news available.</p>
) : (
news.map(item => (
);
}
return (
<div className="flex flex-col pt-16 lg:pt-24">
{news.map(item => (
<div
key={item.id}
className="flex flex-col space-y-4 border-b border-white-200 dark:border-dark-200 py-6 lg:mx-4"
@ -74,10 +78,20 @@ const NewsPage = () => {
</Link>
<p className="text-black/70 dark:text-white/70 text-sm">{item.summary}</p>
</div>
))
)}
))}
</div>
)}
);
};
return (
<div>
<div className="fixed z-40 top-0 left-0 right-0 lg:pl-[104px] lg:pr-6 lg:px-8 px-4 py-4 lg:py-6 border-b border-light-200 dark:border-dark-200">
<div className="flex flex-row items-center space-x-2 max-w-screen-lg lg:mx-auto">
<Newspaper />
<h2 className="text-black dark:text-white lg:text-3xl lg:font-medium">News</h2>
</div>
</div>
{renderContent()}
</div>
);
};