Spaces:
Build error
Build error
File size: 4,533 Bytes
2028f4f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | import { User, Users, Plus, Search, Lock } from 'lucide-react';
import { useState } from 'react';
export default function ChatList({ chats, activeChatId, onSelectChat, onCreateGroup }) {
const [searchTerm, setSearchTerm] = useState('');
const [showCreateModal, setShowCreateModal] = useState(false);
const filteredChats = chats.filter(chat =>
chat.name.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<div className="w-full md:w-80 lg:w-96 bg-telegram-sidebar flex flex-col border-r border-gray-800 h-full">
{/* Search & Actions */}
<div className="p-3 space-y-3">
<div className="relative">
<Search className="absolute left-3 top-2.5 text-telegram-secondary" size={18} />
<input
type="text"
placeholder="Search"
className="w-full bg-telegram-bg text-telegram-text pl-10 pr-4 py-2 rounded-full text-sm focus:outline-none focus:ring-1 focus:ring-telegram-accent placeholder-gray-500"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
<button
onClick={() => setShowCreateModal(true)}
className="w-full bg-telegram-accent hover:bg-blue-600 text-white py-2 rounded-full text-sm font-medium transition-colors flex items-center justify-center gap-2"
>
<Plus size={16} /> New Chat or Group
</button>
</div>
{/* Chat List */}
<div className="flex-1 overflow-y-auto">
{filteredChats.map((chat) => (
<div
key={chat.id}
onClick={() => onSelectChat(chat.id)}
className={`flex items-center gap-3 p-3 cursor-pointer transition-colors hover:bg-white/5 ${activeChatId === chat.id ? 'bg-white/10' : ''}`}
>
<div className={`w-12 h-12 rounded-full flex items-center justify-center text-lg font-bold ${chat.isGroup ? 'bg-purple-600' : 'bg-gradient-to-br from-blue-500 to-cyan-400'}`}>
{chat.isGroup ? <Users size={24} /> : chat.name.charAt(0)}
</div>
<div className="flex-1 min-w-0">
<div className="flex justify-between items-center mb-1">
<h3 className="font-medium truncate">{chat.name}</h3>
<span className="text-xs text-telegram-secondary">{chat.lastTime}</span>
</div>
<div className="flex justify-between items-center">
<p className="text-sm text-telegram-secondary truncate flex items-center gap-1">
{chat.encrypted && <Lock size={10} className="text-green-500" />}
{chat.lastMessage}
</p>
{chat.unread > 0 && (
<span className="bg-telegram-accent text-white text-xs font-bold px-2 py-0.5 rounded-full min-w-[20px] text-center">
{chat.unread}
</span>
)}
</div>
</div>
</div>
))}
</div>
{/* Create Group Modal (Simple Implementation) */}
{showCreateModal && (
<div className="absolute inset-0 bg-black/80 z-50 flex items-center justify-center p-4">
<div className="bg-telegram-sidebar w-full max-w-sm rounded-xl p-6 border border-gray-700">
<h2 className="text-xl font-bold mb-4">New Group</h2>
<p className="text-telegram-secondary text-sm mb-4">
Create a secure group for up to 20 people. All messages are end-to-end encrypted.
</p>
<div className="flex gap-2 mb-4">
<input
type="text"
placeholder="Group Name"
className="flex-1 bg-telegram-bg border border-gray-700 rounded-lg px-3 py-2 focus:outline-none focus:border-telegram-accent"
/>
</div>
<div className="flex justify-end gap-2">
<button
onClick={() => setShowCreateModal(false)}
className="px-4 py-2 text-sm text-telegram-secondary hover:text-white"
>
Cancel
</button>
<button
onClick={() => {
onCreateGroup();
setShowCreateModal(false);
className="px-4 py-2 bg-telegram-accent text-white rounded-lg text-sm font-medium"
>
Create
</button>
</div>
</div>
</div>
)}
</div>
);
} |