alma/NeahNew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

observatory

Browse Source
This commit is contained in:
alma 2025-05-04 21:16:54 +02:00
parent 40a591b231
commit 495706d7a9
1 changed files with 33 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
components/observatory/observatory-view.tsx
View File

@ -213,13 +213,13 @@ export function ObservatoryView() {
const countriesMap = extractCountries(news); const countriesMap = extractCountries(news);
return ( return (
<div className="w-full h-screen bg-[#f5f4ef]"> <div className="w-full h-screen bg-[#f5f4ef] flex flex-col">
{/* Main Content */} {/* Main Content */}
<div className="grid grid-cols-2 gap-6 h-screen p-6"> <div className="grid grid-cols-2 gap-6 p-6 flex-1 overflow-hidden">
{/* News Feed Section */} {/* News Feed Section */}
<div> <div className="h-full overflow-hidden">
<div className="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col"> <div className="bg-white rounded-lg shadow-md h-full flex flex-col">
<div className="px-4 py-3 border-b border-gray-100"> <div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h2 className="text-lg font-medium"> <h2 className="text-lg font-medium">
Latest News Latest News
@ -264,47 +264,48 @@ export function ObservatoryView() {
</div> </div>
</div> </div>
</div> </div>
<div className="flex-grow overflow-y-auto"> <div className="flex-1 overflow-y-auto">
{filteredNews.length === 0 ? ( {filteredNews.length === 0 ? (
<div className="flex flex-col items-center justify-center h-full text-gray-500"> <div className="flex flex-col items-center justify-center h-full text-gray-500">
<Globe className="h-12 w-12 mb-2 text-gray-300" /> <Globe className="h-12 w-12 mb-2 text-gray-300" />
<p>{selectedCountry ? `No news found for ${selectedCountry}` : 'No news found'}</p> <p>{selectedCountry ? `No news found for ${selectedCountry}` : 'No news found'}</p>
</div> </div>
) : ( ) : (
<div> <ul className="divide-y divide-gray-100">
{filteredNews.map((item) => ( {filteredNews.map((item) => (
<a <li key={item.id}>
key={item.id} <a
href={item.url} href={item.url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="block border-b border-gray-100 hover:bg-gray-50 transition-colors" className="block hover:bg-gray-50 transition-colors"
> >
<div className="p-4"> <div className="p-4">
<div className="flex justify-between items-start mb-1"> <div className="flex justify-between items-start mb-1">
<h3 className="font-medium text-gray-900 flex-grow">{item.title}</h3> <h3 className="font-medium text-gray-900 flex-grow">{item.title}</h3>
<span className="text-xs text-gray-500 whitespace-nowrap ml-2">{item.displayDate}</span> <span className="text-xs text-gray-500 whitespace-nowrap ml-2">{item.displayDate}</span>
</div>
<div className="flex justify-between items-center mb-1">
<span className="text-xs font-medium text-gray-500">{item.source}</span>
{item.category && <span className="text-xs bg-gray-100 text-gray-600 rounded-full px-2 py-0.5">{item.category}</span>}
</div>
<p className="text-sm text-gray-600 mt-1 line-clamp-2">{item.description}</p>
</div> </div>
</a>
<div className="flex justify-between items-center mb-1"> </li>
<span className="text-xs font-medium text-gray-500">{item.source}</span>
{item.category && <span className="text-xs bg-gray-100 text-gray-600 rounded-full px-2 py-0.5">{item.category}</span>}
</div>
<p className="text-sm text-gray-600 mt-1 line-clamp-2">{item.description}</p>
</div>
</a>
))} ))}
</div> </ul>
)} )}
</div> </div>
</div> </div>
</div> </div>
{/* Map Section */} {/* Map Section */}
<div> <div className="h-full overflow-hidden">
<div className="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col"> <div className="bg-white rounded-lg shadow-md h-full flex flex-col">
<div className="px-4 py-3 border-b border-gray-100"> <div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<h2 className="text-lg font-medium"> <h2 className="text-lg font-medium">
World Map World Map
@ -336,7 +337,7 @@ export function ObservatoryView() {
</div> </div>
</div> </div>
</div> </div>
<div className="flex-grow relative overflow-hidden"> <div className="flex-1 relative">
{isBrowser && ( {isBrowser && (
<ObservatoryMap <ObservatoryMap
countries={Object.entries(countriesMap).map(([name, items]) => ({ countries={Object.entries(countriesMap).map(([name, items]) => ({