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

widget parole

Browse Source
This commit is contained in:
Alma 2025-04-12 23:57:11 +02:00
parent 0ccdf2720a
commit c5af9ef59a
1 changed files with 18 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/parole.tsx
View File

@ -115,11 +115,11 @@ export function Parole() {
return (
<Card
className="transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer bg-white/50 backdrop-blur-sm h-full"
className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg"
onClick={() => router.push('/parole')}
>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-lg font-semibold">Talk mentions</CardTitle>
<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">Talk mentions</CardTitle>
<Button
variant="ghost"
size="icon"
@ -128,13 +128,13 @@ export function Parole() {
fetchMessages(true);
}}
disabled={refreshing}
className={refreshing ? 'animate-spin' : ''}
className={`${refreshing ? 'animate-spin' : ''} text-gray-600 hover:text-gray-900`}
>
<RefreshCw className="h-4 w-4" />
</Button>
</CardHeader>
<CardContent className="p-4">
{loading && <p className="text-center text-muted-foreground">Loading messages...</p>}
{loading && <p className="text-center text-gray-500">Loading messages...</p>}
{error && (
<div className="text-center">
<p className="text-red-500">Error: {error}</p>
@ -151,28 +151,30 @@ export function Parole() {
</div>
)}
{!loading && !error && (
<div className="space-y-2 max-h-[300px] overflow-y-auto">
<div className="space-y-4 max-h-[300px] overflow-y-auto">
{messages.length === 0 ? (
<p className="text-center text-muted-foreground">No messages found</p>
<p className="text-center text-gray-500">No messages found</p>
) : (
messages.map((message) => (
<div key={message._id} className="flex items-start space-x-2 hover:bg-gray-50 p-2 rounded-lg transition-colors">
<Avatar className="h-6 w-6">
<div key={message._id} className="flex items-start space-x-3 hover:bg-gray-50/50 p-3 rounded-lg transition-colors">
<Avatar className="h-8 w-8">
<AvatarImage src={`https://ui-avatars.com/api/?name=${encodeURIComponent(message.u.name || message.u.username)}&background=random`} />
<AvatarFallback>{(message.u.name || message.u.username).substring(0, 2).toUpperCase()}</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<div className="flex items-baseline">
<p className="text-sm font-medium truncate">{message.u.name || message.u.username}</p>
<span className="ml-2 text-xs text-gray-500">
<div className="flex items-baseline justify-between">
<p className="text-sm font-semibold text-gray-800 truncate">{message.u.name || message.u.username}</p>
<span className="text-xs font-medium text-gray-500">
{new Date(message.ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</span>
</div>
<p className="text-sm text-gray-600 whitespace-pre-wrap line-clamp-2">{message.msg}</p>
<p className="text-sm text-gray-600 whitespace-pre-wrap line-clamp-2 mt-1">{message.msg}</p>
{message.roomName && (
<p className="text-xs text-blue-500 mt-1">
in {message.roomName}
</p>
<div className="flex items-center mt-2">
<span className="inline-flex items-center px-2 py-1 rounded-md bg-blue-50 text-xs font-medium text-blue-700">
{message.roomName}
</span>
</div>
)}
</div>
</div>