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

news design correction padding 13

Browse Source
This commit is contained in:
alma 2025-04-15 14:48:35 +02:00
parent e074429311
commit 43ec806459
1 changed files with 33 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
components/news.tsx
View File

@ -68,13 +68,13 @@ export function News() {
if (status === 'loading' || loading) { if (status === 'loading' || loading) {
return ( return (
<Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-[352px]"> <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 py-2 px-4 border-b border-gray-100"> <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> <CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-2"> <CardContent className="p-3">
<div className="flex items-center justify-center h-[308px]"> <div className="flex items-center justify-center py-6">
<RefreshCw className="h-5 w-5 animate-spin text-gray-400" /> <RefreshCw className="h-4 w-4 animate-spin text-gray-400" />
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
@ -82,49 +82,53 @@ export function News() {
} }
return ( return (
<Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-[352px]"> <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 py-2 px-4 border-b border-gray-100"> <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> <CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
<Button <Button
variant="ghost" variant="ghost"
size="icon" size="icon"
onClick={() => fetchNews(true)} onClick={() => fetchNews(true)}
disabled={refreshing} disabled={refreshing}
className={`${refreshing ? 'animate-spin' : ''} text-gray-600 hover:text-gray-900`} className="h-7 w-7 p-0 hover:bg-gray-100/50 rounded-full"
> >
<RefreshCw className="h-4 w-4" /> <RefreshCw className="h-3.5 w-3.5 text-gray-600" />
</Button> </Button>
</CardHeader> </CardHeader>
<CardContent className="p-2"> <CardContent className="p-3">
{error ? ( {error ? (
<p className="text-center text-red-500">{error}</p> <div className="text-xs text-red-500 text-center py-3">{error}</div>
) : ( ) : (
<div className="space-y-2 h-[308px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent"> <div className="space-y-2 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
{news.length === 0 ? ( {news.length === 0 ? (
<p className="text-center text-gray-500">No news available</p> <div className="text-xs text-gray-500 text-center py-6">No news available</div>
) : ( ) : (
news.map((item) => ( news.map((item) => (
<div <div
key={item.id} key={item.id}
className="p-3 bg-gray-50/50 hover:bg-gray-100/50 rounded-lg transition-colors cursor-pointer" className="p-2 rounded-lg bg-white shadow-sm hover:shadow-md transition-all duration-200 border border-gray-100"
onClick={() => window.open(item.url, '_blank')} onClick={() => window.open(item.url, '_blank')}
> >
<div className="flex items-center justify-between mb-2"> <div className="flex gap-2">
<span className="text-xs text-gray-500">{formatDate(item.date)}</span> <div className="flex-1 min-w-0 space-y-1">
{item.category && ( <h3 className="text-sm font-medium text-gray-800 line-clamp-2" title={item.title}>
<span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600"> {item.title}
{item.category} </h3>
</span> <div className="flex items-center justify-between">
)} <span className="text-xs text-gray-500">{formatDate(item.date)}</span>
{item.category && (
<span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600">
{item.category}
</span>
)}
</div>
{item.description && (
<p className="text-xs text-gray-500 line-clamp-2" title={item.description}>
{item.description}
</p>
)}
</div>
</div> </div>
<h3 className="text-sm font-medium text-gray-800 mb-2 line-clamp-2" title={item.title}>
{item.title}
</h3>
{item.description && (
<p className="text-xs text-gray-500 line-clamp-2" title={item.description}>
{item.description}
</p>
)}
</div> </div>
)) ))
)} )}