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

news widget design 7

Browse Source
This commit is contained in:
alma 2025-04-14 21:04:18 +02:00
parent f5ff070d1f
commit 1e1e71a33d
1 changed files with 34 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
components/news.tsx
View File

@ -5,13 +5,12 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { RefreshCw } from "lucide-react";
import { useSession } from "next-auth/react";
import { formatDistance } from 'date-fns';
import { fr } from 'date-fns/locale';
interface NewsItem {
id: number;
title: string;
date: string;
displayDate: string;
timestamp: string;
source: string;
description: string | null;
category: string | null;
@ -53,24 +52,11 @@ export function News() {
}
}, [status]);
const formatDate = (dateString: string) => {
try {
const date = new Date(dateString);
return formatDistance(date, new Date(), {
addSuffix: true,
locale: fr
});
} catch (err) {
console.error('Error formatting date:', err);
return dateString;
}
};
if (status === 'loading' || loading) {
return (
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
<CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
<CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg">
<CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0 border-b border-gray-100">
<CardTitle className="text-xl font-bold">News</CardTitle>
</CardHeader>
<CardContent className="p-6">
<div className="flex items-center justify-center">
@ -82,9 +68,9 @@ export function News() {
}
return (
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full">
<CardHeader className="flex flex-row items-center justify-between pb-2 space-x-4 border-b border-gray-100">
<CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
<Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg">
<CardHeader className="flex flex-row items-center justify-between pb-2 space-y-0 border-b border-gray-100">
<CardTitle className="text-xl font-bold">News</CardTitle>
<Button
variant="ghost"
size="icon"
@ -95,36 +81,46 @@ export function News() {
<RefreshCw className="h-4 w-4" />
</Button>
</CardHeader>
<CardContent className="p-3">
<CardContent className="p-0">
{error ? (
<p className="text-center text-red-500">{error}</p>
<p className="text-center text-red-500 p-4">{error}</p>
) : (
<div className="space-y-2 max-h-[220px] overflow-y-auto">
<div className="divide-y divide-gray-100">
{news.length === 0 ? (
<p className="text-center text-gray-500">No news available</p>
<p className="text-center text-gray-500 p-4">No news available</p>
) : (
news.map((item) => (
<div
key={item.id}
className="p-2 hover:bg-gray-50/50 rounded-lg transition-colors cursor-pointer"
className="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
onClick={() => window.open(item.url, '_blank')}
>
<div className="flex items-center justify-between mb-1">
<span className="text-sm text-gray-500">{formatDate(item.date)}</span>
<div className="flex items-start justify-between gap-x-2 mb-1">
<div className="flex-1">
<h3 className="text-sm font-medium text-gray-900 line-clamp-2 mb-1">
{item.title}
</h3>
{item.description && (
<p className="text-sm text-gray-500 line-clamp-2 mb-2">
{item.description}
</p>
)}
<div className="flex items-center gap-x-2 text-xs text-gray-500">
<span>{item.displayDate}</span>
{item.source && (
<>
<span>•</span>
<span className="text-gray-400">{item.source}</span>
</>
)}
</div>
</div>
{item.category && (
<span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600">
<span className="inline-flex items-center rounded-md bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-700/10 whitespace-nowrap">
{item.category}
</span>
)}
</div>
<h3 className="text-sm font-medium text-gray-800 line-clamp-2" title={item.title}>
{item.title}
</h3>
{item.description && (
<p className="text-xs text-gray-500 mt-1 line-clamp-2" title={item.description}>
{item.description}
</p>
)}
</div>
))
)}