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

widgets email and news 2

Browse Source
This commit is contained in:
Alma 2025-04-13 11:37:56 +02:00
parent 667d69b053
commit 25fc47ecb3
3 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/page.tsx
View File

@ -9,9 +9,9 @@ import { Parole } from "@/components/parole";
export default function Home() { export default function Home() {
return ( return (
<main className="container mx-auto p-4 space-y-4"> <main className="container mx-auto py-6 px-8 space-y-6">
{/* First row */} {/* First row */}
<div className="grid grid-cols-12 gap-4"> <div className="grid grid-cols-12 gap-6">
<div className="col-span-3"> <div className="col-span-3">
<QuoteCard /> <QuoteCard />
</div> </div>
@ -27,7 +27,7 @@ export default function Home() {
</div> </div>
{/* Second row */} {/* Second row */}
<div className="grid grid-cols-12 gap-4"> <div className="grid grid-cols-12 gap-6">
<div className="col-span-6"> <div className="col-span-6">
<Email /> <Email />
</div> </div>

14
components/email.tsx
View File

@ -88,7 +88,7 @@ export function Email() {
return ( 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"> <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"> <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">Email</CardTitle> <CardTitle className="text-lg font-semibold text-gray-800">Email</CardTitle>
<Button <Button
variant="ghost" variant="ghost"
@ -104,7 +104,7 @@ export function Email() {
{error ? ( {error ? (
<p className="text-center text-red-500">{error}</p> <p className="text-center text-red-500">{error}</p>
) : ( ) : (
<div className="space-y-4 max-h-[300px] overflow-y-auto"> <div className="space-y-3 max-h-[240px] overflow-y-auto pr-2">
{emails.length === 0 ? ( {emails.length === 0 ? (
<p className="text-center text-gray-500">No emails available</p> <p className="text-center text-gray-500">No emails available</p>
) : ( ) : (
@ -113,16 +113,16 @@ export function Email() {
key={email.id} key={email.id}
className="p-3 hover:bg-gray-50/50 rounded-lg transition-colors" className="p-3 hover:bg-gray-50/50 rounded-lg transition-colors"
> >
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-2">
<span className="text-xs font-medium text-gray-500">{email.sender.name}</span> <span className="text-sm font-medium text-gray-600">{email.sender.name}</span>
<div className="flex items-center space-x-2"> <div className="flex items-center space-x-3">
{email.isUnread && ( {email.isUnread && (
<span className="w-2 h-2 bg-blue-600 rounded-full"></span> <span className="w-2 h-2 bg-blue-600 rounded-full"></span>
)} )}
<span className="text-xs text-gray-500">{email.date}</span> <span className="text-sm text-gray-500">{email.date}</span>
</div> </div>
</div> </div>
<h3 className={`text-sm ${email.isUnread ? 'font-semibold' : 'font-medium'} text-gray-800`}> <h3 className={`text-sm ${email.isUnread ? 'font-semibold' : 'font-medium'} text-gray-800 line-clamp-2`}>
{email.subject} {email.subject}
</h3> </h3>
</div> </div>

12
components/news.tsx
View File

@ -66,7 +66,7 @@ export function News() {
return ( 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"> <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"> <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> <CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
<Button <Button
variant="ghost" variant="ghost"
@ -82,7 +82,7 @@ export function News() {
{error ? ( {error ? (
<p className="text-center text-red-500">{error}</p> <p className="text-center text-red-500">{error}</p>
) : ( ) : (
<div className="space-y-4 max-h-[300px] overflow-y-auto"> <div className="space-y-3 max-h-[240px] overflow-y-auto pr-2">
{news.length === 0 ? ( {news.length === 0 ? (
<p className="text-center text-gray-500">No news available</p> <p className="text-center text-gray-500">No news available</p>
) : ( ) : (
@ -91,13 +91,13 @@ export function News() {
key={item.id} key={item.id}
className="p-3 hover:bg-gray-50/50 rounded-lg transition-colors" className="p-3 hover:bg-gray-50/50 rounded-lg transition-colors"
> >
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-2">
<span className="text-xs font-medium text-gray-500">{item.date}</span> <span className="text-sm text-gray-600">{item.date}</span>
<span className="text-xs px-2 py-1 rounded-full bg-blue-50 text-blue-700"> <span className="text-xs px-2.5 py-1 rounded-full bg-blue-50 text-blue-700">
{item.category} {item.category}
</span> </span>
</div> </div>
<h3 className="text-sm font-medium text-gray-800">{item.title}</h3> <h3 className="text-sm font-medium text-gray-800 line-clamp-2">{item.title}</h3>
</div> </div>
)) ))
)} )}