121 lines
3.5 KiB
TypeScript
121 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { MessageSquare, Trash2, MoreHorizontal } from "lucide-react";
|
|
|
|
function generateMockMessages() {
|
|
const messages = [
|
|
{
|
|
id: 1,
|
|
character: "Luna",
|
|
avatar: "🌙",
|
|
preview: "That sounds interesting...",
|
|
timestamp: "2 hours ago",
|
|
unread: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
character: "Alex",
|
|
avatar: "⚡",
|
|
preview: "Hey! How have you been?",
|
|
timestamp: "5 hours ago",
|
|
unread: false,
|
|
},
|
|
{
|
|
id: 3,
|
|
character: "Sage",
|
|
avatar: "🧙",
|
|
preview: "The ancient prophecy speaks of...",
|
|
timestamp: "Yesterday",
|
|
unread: false,
|
|
},
|
|
{
|
|
id: 4,
|
|
character: "Nova",
|
|
avatar: "✨",
|
|
preview: "Ready for another space adventure?",
|
|
timestamp: "2 days ago",
|
|
unread: false,
|
|
},
|
|
{
|
|
id: 5,
|
|
character: "Echo",
|
|
avatar: "🔮",
|
|
preview: "I sensed something in the shadows...",
|
|
timestamp: "3 days ago",
|
|
unread: false,
|
|
},
|
|
{
|
|
id: 6,
|
|
character: "Storm",
|
|
avatar: "⛈️",
|
|
preview: "The journey awaits us!",
|
|
timestamp: "1 week ago",
|
|
unread: false,
|
|
},
|
|
];
|
|
|
|
return messages;
|
|
}
|
|
|
|
export default function MessagesPage() {
|
|
const messages = generateMockMessages();
|
|
|
|
return (
|
|
<div className="p-6 max-w-3xl mx-auto">
|
|
{/* Header */}
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold mb-2">Messages</h1>
|
|
<p className="text-gray-600">Your conversations with characters</p>
|
|
</div>
|
|
|
|
{/* Messages List */}
|
|
<div className="space-y-2">
|
|
{messages.map((msg) => (
|
|
<div
|
|
key={msg.id}
|
|
className={`border border-gray-200 rounded-xl p-4 hover:bg-gray-50 cursor-pointer transition flex items-center gap-4 group ${
|
|
msg.unread ? "bg-blue-50" : "bg-white"
|
|
}`}
|
|
>
|
|
{/* Avatar */}
|
|
<div className="w-12 h-12 bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 rounded-full flex items-center justify-center text-xl flex-shrink-0">
|
|
{msg.avatar}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<h3 className="font-semibold">{msg.character}</h3>
|
|
{msg.unread && <div className="w-2 h-2 bg-blue-600 rounded-full"></div>}
|
|
</div>
|
|
<p className="text-sm text-gray-600 truncate">{msg.preview}</p>
|
|
</div>
|
|
|
|
{/* Meta */}
|
|
<div className="text-right flex-shrink-0">
|
|
<p className="text-xs text-gray-500 mb-2">{msg.timestamp}</p>
|
|
<div className="opacity-0 group-hover:opacity-100 transition flex gap-2">
|
|
<button className="p-2 hover:bg-gray-200 rounded-lg transition">
|
|
<MoreHorizontal className="w-4 h-4" />
|
|
</button>
|
|
<button className="p-2 hover:bg-red-100 text-red-600 rounded-lg transition">
|
|
<Trash2 className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Empty State */}
|
|
{messages.length === 0 && (
|
|
<div className="text-center py-16">
|
|
<MessageSquare className="w-16 h-16 text-gray-300 mx-auto mb-4" />
|
|
<h3 className="text-lg font-semibold mb-2">No messages yet</h3>
|
|
<p className="text-gray-600">Start a conversation with a character!</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|