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

update widget design

Browse Source
This commit is contained in:
Alma 2025-04-10 00:31:21 +02:00
parent 3d2e376927
commit 0fe3f88a4a
1 changed files with 34 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
components/parole.tsx
View File

@ -5,6 +5,7 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { RefreshCw } from "lucide-react";
import { useRouter } from "next/navigation";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
interface Message {
_id: string;
@ -15,6 +16,8 @@ interface Message {
username: string;
name?: string;
};
roomName: string;
roomType: string;
}
export function Parole() {
@ -66,15 +69,18 @@ export function Parole() {
return (
<Card
className="transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer"
className="transition-transform duration-500 ease-in-out transform hover:scale-105 cursor-pointer bg-white/50 backdrop-blur-sm"
onClick={() => router.push('/parole')}
>
<CardHeader className="flex flex-row items-center justify-between">
<CardTitle>Parole Messages</CardTitle>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-lg font-semibold">Talk mentions</CardTitle>
<Button
variant="ghost"
size="icon"
onClick={() => fetchMessages(true)}
onClick={(e) => {
e.stopPropagation();
fetchMessages(true);
}}
disabled={refreshing}
className={refreshing ? 'animate-spin' : ''}
>
@ -88,7 +94,10 @@ export function Parole() {
<p className="text-red-500">Error: {error}</p>
<Button
variant="outline"
onClick={() => fetchMessages(true)}
onClick={(e) => {
e.stopPropagation();
fetchMessages(true);
}}
className="mt-2"
>
Try Again
@ -96,17 +105,30 @@ export function Parole() {
</div>
)}
{!loading && !error && (
<div className="space-y-4 max-h-[500px] overflow-y-auto">
<div className="space-y-3 max-h-[400px] overflow-y-auto">
{messages.length === 0 ? (
<p className="text-center text-muted-foreground">No messages found</p>
) : (
messages.map((message) => (
<div key={message._id} className="border-b pb-2">
<p className="font-medium">{message.u.name || message.u.username}</p>
<p className="text-sm whitespace-pre-wrap">{message.msg}</p>
<p className="text-xs text-muted-foreground">
{new Date(message.ts).toLocaleString()}
</p>
<div key={message._id} className="flex items-start space-x-3 hover:bg-gray-50 p-2 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">
{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>
{message.roomName && (
<p className="text-xs text-blue-500 mt-1">
in {message.roomName}
</p>
)}
</div>
</div>
))
)}