99 lines
3.2 KiB
TypeScript
99 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Newspaper } from "lucide-react";
|
|
import Link from "next/link";
|
|
|
|
interface NewsItem {
|
|
id: string;
|
|
title: string;
|
|
summary: string;
|
|
image: string;
|
|
}
|
|
|
|
const NewsPage = () => {
|
|
const [news, setNews] = useState<NewsItem[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
const fetchNews = async () => {
|
|
try {
|
|
console.log("Fetching news...");
|
|
const response = await fetch("/api/news");
|
|
console.log("Response status:", response.status);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const data = await response.json();
|
|
console.log("Fetched data:", data);
|
|
setNews(data);
|
|
} catch (error) {
|
|
console.error("Error fetching news:", error);
|
|
setError(`Failed to load news. Error: ${error instanceof Error ? error.message : String(error)}`);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchNews();
|
|
}, []);
|
|
|
|
const renderContent = () => {
|
|
if (loading) {
|
|
return (
|
|
<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>
|
|
);
|
|
}
|
|
|
|
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>
|
|
);
|
|
}
|
|
|
|
if (news.length === 0) {
|
|
return <p className="text-black/70 dark:text-white/70 text-sm text-center">No news available.</p>;
|
|
}
|
|
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 md:mx-4"
|
|
>
|
|
{/* Large and Small Responsive Screen Layout */}
|
|
<Link href={`/news/${item.id}`} className="cursor-pointer md:flex flex-row">
|
|
<img src={item.image} alt={item.title} className="w-full h-48 md:h-32 object-cover rounded-lg md:w-32" />
|
|
<div className="flex flex-col space-y-5 ml-4">
|
|
<h3 className="text-black dark:text-white md:text-xl font-medium hover:underline">{item.title}</h3>
|
|
<p className="text-black/70 dark:text-white/70 text-sm hover:text-black dark:hover:text-white">
|
|
{item.summary}
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
</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>
|
|
);
|
|
};
|
|
|
|
export default NewsPage;
|