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

widget parole 24

Browse Source
This commit is contained in:
Alma 2025-04-13 10:41:46 +02:00
parent a851dbfbf5
commit 83488f7af8
1 changed files with 34 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
components/parole.tsx
View File

@ -9,16 +9,29 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { signIn, useSession } from "next-auth/react";
interface Message {
_id: string;
msg: string;
ts: string;
u: {
_id: string;
username: string;
name?: string;
};
id: string;
text: string;
timestamp: string;
rawTimestamp: string;
roomName: string;
roomType: string;
sender: {
_id: string;
username: string;
name: string;
initials: string;
color: string;
};
isOwnMessage: boolean;
room: {
id: string;
type: string;
name: string;
isChannel: boolean;
isPrivateGroup: boolean;
isDirect: boolean;
link: string;
};
}
export function Parole() {
@ -153,23 +166,25 @@ export function Parole() {
<p className="text-center text-gray-500">No messages found</p>
) : (
messages.map((message) => (
<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>
<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" style={{ backgroundColor: message.sender.color }}>
<AvatarImage src={`https://ui-avatars.com/api/?name=${encodeURIComponent(message.sender.name)}&background=random`} />
<AvatarFallback>{message.sender.initials}</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<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>
<p className="text-sm font-semibold text-gray-800 truncate">{message.sender.name}</p>
<span className="text-xs font-medium text-gray-500">{message.timestamp}</span>
</div>
<p className="text-sm text-gray-600 whitespace-pre-wrap line-clamp-2 mt-1">{message.msg}</p>
<p className="text-sm text-gray-600 whitespace-pre-wrap line-clamp-2 mt-1">{message.text}</p>
{message.roomName && (
<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 className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${
message.room.isChannel ? 'bg-blue-50 text-blue-700' :
message.room.isPrivateGroup ? 'bg-purple-50 text-purple-700' :
'bg-green-50 text-green-700'
}`}>
{message.room.isChannel ? '#' : message.room.isPrivateGroup ? '🔒' : '💬'} {message.roomName}
</span>
</div>
)}