observatory
This commit is contained in:
parent
40a591b231
commit
495706d7a9
@ -213,13 +213,13 @@ export function ObservatoryView() {
|
||||
const countriesMap = extractCountries(news);
|
||||
|
||||
return (
|
||||
<div className="w-full h-screen bg-[#f5f4ef]">
|
||||
<div className="w-full h-screen bg-[#f5f4ef] flex flex-col">
|
||||
{/* 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 */}
|
||||
<div>
|
||||
<div className="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col">
|
||||
<div className="px-4 py-3 border-b border-gray-100">
|
||||
<div className="h-full overflow-hidden">
|
||||
<div className="bg-white rounded-lg shadow-md h-full flex flex-col">
|
||||
<div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-medium">
|
||||
Latest News
|
||||
@ -264,47 +264,48 @@ export function ObservatoryView() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow overflow-y-auto">
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
{filteredNews.length === 0 ? (
|
||||
<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" />
|
||||
<p>{selectedCountry ? `No news found for ${selectedCountry}` : 'No news found'}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<ul className="divide-y divide-gray-100">
|
||||
{filteredNews.map((item) => (
|
||||
<a
|
||||
key={item.id}
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block border-b border-gray-100 hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex justify-between items-start mb-1">
|
||||
<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>
|
||||
<li key={item.id}>
|
||||
<a
|
||||
href={item.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex justify-between items-start mb-1">
|
||||
<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>
|
||||
</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 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>
|
||||
</a>
|
||||
</a>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Map Section */}
|
||||
<div>
|
||||
<div className="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col">
|
||||
<div className="px-4 py-3 border-b border-gray-100">
|
||||
<div className="h-full overflow-hidden">
|
||||
<div className="bg-white rounded-lg shadow-md h-full flex flex-col">
|
||||
<div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-lg font-medium">
|
||||
World Map
|
||||
@ -336,7 +337,7 @@ export function ObservatoryView() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-grow relative overflow-hidden">
|
||||
<div className="flex-1 relative">
|
||||
{isBrowser && (
|
||||
<ObservatoryMap
|
||||
countries={Object.entries(countriesMap).map(([name, items]) => ({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user