observatoire
This commit is contained in:
parent
981d8fe556
commit
4136e3c254
@ -213,150 +213,152 @@ export function ObservatoryView() {
|
|||||||
const countriesMap = extractCountries(news);
|
const countriesMap = extractCountries(news);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-[calc(100vh-64px)] w-full bg-white">
|
<main className="w-full h-screen bg-white">
|
||||||
{/* Title */}
|
<div className="w-full h-full px-4 pt-12 pb-4 flex flex-col">
|
||||||
<div className="bg-white border-b border-gray-100 py-3 px-6">
|
{/* Title */}
|
||||||
<h1 className="text-xl font-bold text-gray-800">Observatoire de La Paix et du Vivre-Ensemble</h1>
|
<div className="bg-white border-b border-gray-100 py-3 px-6">
|
||||||
</div>
|
<h1 className="text-xl font-bold text-gray-800">Observatoire de La Paix et du Vivre-Ensemble</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Main Content */}
|
||||||
<div className="grid grid-cols-2 gap-6 p-6 flex-1 overflow-auto bg-gray-50">
|
<div className="grid grid-cols-2 gap-6 py-6 px-6 flex-1 overflow-auto bg-gray-50">
|
||||||
{/* News Feed Section */}
|
{/* News Feed Section */}
|
||||||
<div className="h-full overflow-hidden">
|
<div className="h-full overflow-hidden">
|
||||||
<div className="bg-white rounded-lg shadow-sm border border-gray-100 h-full flex flex-col">
|
<div className="bg-white rounded-lg shadow-sm border border-gray-100 h-full flex flex-col">
|
||||||
<div className="px-6 py-4 border-b border-gray-100 flex-shrink-0">
|
<div className="px-6 py-4 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-semibold text-gray-800">
|
<h2 className="text-lg font-semibold text-gray-800">
|
||||||
Latest News
|
Latest News
|
||||||
<span className="text-sm font-normal ml-2 text-gray-500">
|
<span className="text-sm font-normal ml-2 text-gray-500">
|
||||||
({filteredNews.length} articles)
|
({filteredNews.length} articles)
|
||||||
{news.length < 10 && (
|
{news.length < 10 && (
|
||||||
<span className="italic ml-1">
|
<span className="italic ml-1">
|
||||||
(API limitation)
|
(API limitation)
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => setUseAccumulatedNews(!useAccumulatedNews)}
|
||||||
|
className="h-8 px-3 text-xs"
|
||||||
|
>
|
||||||
|
{useAccumulatedNews
|
||||||
|
? `Showing All (${accumulatedNews.length})`
|
||||||
|
: `Showing Latest (${news.length})`}
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => invalidateCache()}
|
||||||
|
className="h-8 px-3 text-xs"
|
||||||
|
aria-label="Purge cache"
|
||||||
|
>
|
||||||
|
Purge Cache
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
onClick={() => fetchNews(true)}
|
||||||
|
className="h-8 w-8 p-0"
|
||||||
|
aria-label="Refresh news"
|
||||||
|
>
|
||||||
|
<RefreshCw className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
) : (
|
||||||
|
<ul className="divide-y divide-gray-100">
|
||||||
|
{filteredNews.map((item) => (
|
||||||
|
<li key={item.id}>
|
||||||
|
<a
|
||||||
|
href={item.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="block hover:bg-gray-50 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="px-6 py-4">
|
||||||
|
<div className="flex justify-between items-start mb-2">
|
||||||
|
<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-2">
|
||||||
|
<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-2 line-clamp-2">{item.description}</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Map Section */}
|
||||||
|
<div className="h-full overflow-hidden">
|
||||||
|
<div className="bg-white rounded-lg shadow-sm border border-gray-100 h-full flex flex-col">
|
||||||
|
<div className="px-6 py-4 border-b border-gray-100 flex-shrink-0">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-800">
|
||||||
|
World Map
|
||||||
|
{selectedCountry && (
|
||||||
|
<span className="text-sm font-normal ml-2 text-gray-500">
|
||||||
|
(Selected: {selectedCountry})
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</span>
|
</h2>
|
||||||
</h2>
|
<div className="flex gap-2">
|
||||||
<div className="flex gap-2">
|
<Button
|
||||||
<Button
|
variant="outline"
|
||||||
variant="outline"
|
size="sm"
|
||||||
size="sm"
|
onClick={() => setSelectedCountry(null)}
|
||||||
onClick={() => setUseAccumulatedNews(!useAccumulatedNews)}
|
className="h-8 px-3 text-xs"
|
||||||
className="h-8 px-3 text-xs"
|
disabled={!selectedCountry}
|
||||||
>
|
>
|
||||||
{useAccumulatedNews
|
Clear Selection
|
||||||
? `Showing All (${accumulatedNews.length})`
|
</Button>
|
||||||
: `Showing Latest (${news.length})`}
|
<Button
|
||||||
</Button>
|
variant="ghost"
|
||||||
<Button
|
size="sm"
|
||||||
variant="outline"
|
onClick={() => fetchNews(true)}
|
||||||
size="sm"
|
className="h-8 w-8 p-0"
|
||||||
onClick={() => invalidateCache()}
|
aria-label="Refresh news"
|
||||||
className="h-8 px-3 text-xs"
|
>
|
||||||
aria-label="Purge cache"
|
<RefreshCw className="h-4 w-4" />
|
||||||
>
|
</Button>
|
||||||
Purge Cache
|
</div>
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => fetchNews(true)}
|
|
||||||
className="h-8 w-8 p-0"
|
|
||||||
aria-label="Refresh news"
|
|
||||||
>
|
|
||||||
<RefreshCw className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="flex-1 relative">
|
||||||
<div className="flex-1 overflow-y-auto">
|
{isBrowser && (
|
||||||
{filteredNews.length === 0 ? (
|
<ObservatoryMap
|
||||||
<div className="flex flex-col items-center justify-center h-full text-gray-500">
|
countries={Object.entries(countriesMap).map(([name, items]) => ({
|
||||||
<Globe className="h-12 w-12 mb-2 text-gray-300" />
|
name,
|
||||||
<p>{selectedCountry ? `No news found for ${selectedCountry}` : 'No news found'}</p>
|
count: items.length
|
||||||
</div>
|
}))}
|
||||||
) : (
|
onCountrySelect={handleCountrySelect}
|
||||||
<ul className="divide-y divide-gray-100">
|
selectedCountry={selectedCountry}
|
||||||
{filteredNews.map((item) => (
|
/>
|
||||||
<li key={item.id}>
|
)}
|
||||||
<a
|
|
||||||
href={item.url}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="block hover:bg-gray-50 transition-colors"
|
|
||||||
>
|
|
||||||
<div className="px-6 py-4">
|
|
||||||
<div className="flex justify-between items-start mb-2">
|
|
||||||
<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-2">
|
|
||||||
<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-2 line-clamp-2">{item.description}</p>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Map Section */}
|
|
||||||
<div className="h-full overflow-hidden">
|
|
||||||
<div className="bg-white rounded-lg shadow-sm border border-gray-100 h-full flex flex-col">
|
|
||||||
<div className="px-6 py-4 border-b border-gray-100 flex-shrink-0">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-800">
|
|
||||||
World Map
|
|
||||||
{selectedCountry && (
|
|
||||||
<span className="text-sm font-normal ml-2 text-gray-500">
|
|
||||||
(Selected: {selectedCountry})
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</h2>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setSelectedCountry(null)}
|
|
||||||
className="h-8 px-3 text-xs"
|
|
||||||
disabled={!selectedCountry}
|
|
||||||
>
|
|
||||||
Clear Selection
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => fetchNews(true)}
|
|
||||||
className="h-8 w-8 p-0"
|
|
||||||
aria-label="Refresh news"
|
|
||||||
>
|
|
||||||
<RefreshCw className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-1 relative">
|
|
||||||
{isBrowser && (
|
|
||||||
<ObservatoryMap
|
|
||||||
countries={Object.entries(countriesMap).map(([name, items]) => ({
|
|
||||||
name,
|
|
||||||
count: items.length
|
|
||||||
}))}
|
|
||||||
onCountrySelect={handleCountrySelect}
|
|
||||||
selectedCountry={selectedCountry}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user