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