41 lines
3.2 KiB
TypeScript
41 lines
3.2 KiB
TypeScript
import React from "react";
|
|
import Message from "./Message";
|
|
import MessageInput from "./MessageInput";
|
|
|
|
const messages = [
|
|
{ type: "system", label: "FOUNDATION", text: "Foundation authentication services upgraded to v2.1.0. Enhanced security protocols now active across all AeThex infrastructure.", className: "foundation" },
|
|
{ type: "user", author: "Trevor", badge: "Foundation", time: "10:34 AM", text: "Just pushed the authentication updates. All services should automatically migrate to the new protocols within 24 hours.", avatar: "T", avatarBg: "from-red-600 to-red-800" },
|
|
{ type: "user", author: "Marcus", time: "10:41 AM", text: "Excellent work! I've been testing the new Passport integration and it's incredibly smooth. The Trinity color-coding in the UI makes it really clear which division is handling what.", avatar: "M", avatarBg: "from-blue-600 to-blue-900" },
|
|
{ type: "system", label: "LABS", text: "Nexus Engine v2.0-beta now available for testing. New cross-platform sync reduces latency by 40%. Join #labs-testing to participate.", className: "labs" },
|
|
{ type: "user", author: "Sarah", badge: "Labs", time: "11:15 AM", text: "The Nexus v2 parallel compilation is insane. Cut my build time from 3 minutes to under 2. Still some edge cases with complex state synchronization but wow... ⚠️", avatar: "S", avatarBg: "from-orange-400 to-orange-700" },
|
|
{ type: "user", author: "Anderson", badge: "Founder", time: "11:47 AM", text: "Love seeing the Trinity infrastructure working in harmony. Foundation keeping everything secure, Labs pushing the boundaries, Corporation delivering production-ready tools. This is exactly the vision.", avatar: "A", avatarBg: "from-red-600 via-blue-600 to-orange-400" },
|
|
{ type: "user", author: "DevUser_2847", time: "12:03 PM", text: "Quick question - when using AeThex Studio, does the Terminal automatically connect to all three Trinity divisions, or do I need to configure that?", avatar: "D", avatarBg: "bg-[#1a1a1a]" },
|
|
{ type: "system", label: "CORPORATION", text: "AeThex Studio Pro users: New Railway deployment templates available. Optimized configurations for Foundation APIs, Corporation services, and Labs experiments.", className: "corporation" },
|
|
];
|
|
|
|
const ChatArea: React.FC = () => (
|
|
<div className="chat-area flex flex-col flex-1 bg-[#0a0a0a]">
|
|
{/* Chat Header */}
|
|
<div className="chat-header px-5 py-4 border-b border-[#1a1a1a] flex items-center gap-3">
|
|
<span className="channel-name-header flex-1 font-bold text-base"># general</span>
|
|
<div className="chat-tools flex gap-4 text-sm text-gray-500">
|
|
<span className="chat-tool cursor-pointer hover:text-blue-500">🔔</span>
|
|
<span className="chat-tool cursor-pointer hover:text-blue-500">📌</span>
|
|
<span className="chat-tool cursor-pointer hover:text-blue-500">👥 128</span>
|
|
<span className="chat-tool cursor-pointer hover:text-blue-500">🔍</span>
|
|
</div>
|
|
</div>
|
|
{/* Messages */}
|
|
<div className="chat-messages flex-1 overflow-y-auto px-5 py-5">
|
|
{messages.map((msg, i) => (
|
|
<Message key={i} {...msg} />
|
|
))}
|
|
</div>
|
|
{/* Message Input */}
|
|
<div className="message-input-container px-5 py-5 border-t border-[#1a1a1a]">
|
|
<MessageInput />
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
export default ChatArea;
|