134 lines
4 KiB
TypeScript
134 lines
4 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useEffect, useRef } from 'react';
|
|
|
|
interface ChatMessage {
|
|
id: string;
|
|
username: string;
|
|
message: string;
|
|
timestamp: Date;
|
|
}
|
|
|
|
export default function ChatSidebar() {
|
|
const [messages, setMessages] = useState<ChatMessage[]>([
|
|
{
|
|
id: '1',
|
|
username: 'CyberUser',
|
|
message: 'Welcome to AeThex Live!',
|
|
timestamp: new Date(),
|
|
},
|
|
{
|
|
id: '2',
|
|
username: 'TechFan',
|
|
message: 'This stream is amazing!',
|
|
timestamp: new Date(),
|
|
},
|
|
]);
|
|
const [inputMessage, setInputMessage] = useState('');
|
|
const messagesEndRef = useRef<HTMLDivElement>(null);
|
|
|
|
const scrollToBottom = () => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
|
|
};
|
|
|
|
useEffect(() => {
|
|
// Simulate new messages
|
|
const interval = setInterval(() => {
|
|
const randomUsers = ['NeuralNet', 'DataStream', 'QuantumBit', 'CyberPunk'];
|
|
const randomMessages = [
|
|
'Great content!',
|
|
'Love the vibe',
|
|
'🔥🔥🔥',
|
|
'Keep it up!',
|
|
'Amazing quality',
|
|
];
|
|
|
|
const newMessage: ChatMessage = {
|
|
id: Date.now().toString(),
|
|
username: randomUsers[Math.floor(Math.random() * randomUsers.length)],
|
|
message: randomMessages[Math.floor(Math.random() * randomMessages.length)],
|
|
timestamp: new Date(),
|
|
};
|
|
|
|
setMessages((prev) => [...prev.slice(-49), newMessage]);
|
|
}, 10000);
|
|
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
scrollToBottom();
|
|
}, [messages]);
|
|
|
|
const handleSendMessage = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!inputMessage.trim()) return;
|
|
|
|
const newMessage: ChatMessage = {
|
|
id: Date.now().toString(),
|
|
username: 'You',
|
|
message: inputMessage,
|
|
timestamp: new Date(),
|
|
};
|
|
|
|
setMessages((prev) => [...prev, newMessage]);
|
|
setInputMessage('');
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-full bg-black/50 backdrop-blur-sm border-l border-cyan-500/30">
|
|
<div className="p-4 border-b border-cyan-500/30">
|
|
<h2 className="text-cyan-400 font-mono font-semibold flex items-center gap-2">
|
|
<svg
|
|
className="w-5 h-5"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
|
/>
|
|
</svg>
|
|
Live Chat
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="flex-1 overflow-y-auto p-4 space-y-3">
|
|
{messages.map((msg) => (
|
|
<div key={msg.id} className="animate-fade-in">
|
|
<div className="flex items-start gap-2">
|
|
<span className="text-cyan-400 font-mono text-xs font-semibold">
|
|
{msg.username}:
|
|
</span>
|
|
<span className="text-white/90 text-xs flex-1 break-words">
|
|
{msg.message}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
|
|
<form onSubmit={handleSendMessage} className="p-4 border-t border-cyan-500/30">
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
value={inputMessage}
|
|
onChange={(e) => setInputMessage(e.target.value)}
|
|
placeholder="Type a message..."
|
|
className="flex-1 bg-black/50 border border-cyan-500/30 rounded-lg px-3 py-2 text-white text-sm font-mono placeholder-cyan-400/40 focus:outline-none focus:ring-2 focus:ring-cyan-500/50"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="bg-cyan-500 hover:bg-cyan-600 text-black font-mono font-semibold px-4 py-2 rounded-lg transition-colors text-sm"
|
|
>
|
|
Send
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|