Create Staff Chat page for internal communication
cgen-7dd6e40b75974bc48a5159d937722f5e
This commit is contained in:
Builder.io
parent
3455b17fd9
commit
3e84c0b88f
1 changed files with 190 additions and 0 deletions
190
client/pages/StaffChat.tsx
Normal file
190
client/pages/StaffChat.tsx
Normal file
|
|
@ -0,0 +1,190 @@
|
|||
import { useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import Layout from "@/components/Layout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { MessageSquare, Send, ExternalLink, Hash, Lock } from "lucide-react";
|
||||
|
||||
const CHANNELS = [
|
||||
{ id: 1, name: "general", type: "public", members: 12, unread: 3 },
|
||||
{ id: 2, name: "engineering", type: "public", members: 8, unread: 0 },
|
||||
{ id: 3, name: "operations", type: "public", members: 5, unread: 1 },
|
||||
{ id: 4, name: "announcements", type: "locked", members: 15, unread: 2 },
|
||||
];
|
||||
|
||||
const MESSAGES = [
|
||||
{
|
||||
id: 1,
|
||||
author: "John Founder",
|
||||
content: "Welcome to the AeThex staff chat!",
|
||||
timestamp: "10:30 AM",
|
||||
isOwn: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
author: "Sarah Dev",
|
||||
content: "Great to have everyone here",
|
||||
timestamp: "10:32 AM",
|
||||
isOwn: false,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
author: "You",
|
||||
content: "Looking forward to collaborating",
|
||||
timestamp: "10:35 AM",
|
||||
isOwn: true,
|
||||
},
|
||||
];
|
||||
|
||||
export default function StaffChat() {
|
||||
const navigate = useNavigate();
|
||||
const [selectedChannel, setSelectedChannel] = useState(CHANNELS[0]);
|
||||
const [message, setMessage] = useState("");
|
||||
|
||||
const handleSend = () => {
|
||||
if (message.trim()) {
|
||||
setMessage("");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-purple-900/20 to-slate-950 py-12 px-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold text-white mb-2">
|
||||
Staff Chat
|
||||
</h1>
|
||||
<p className="text-gray-300 flex items-center gap-2">
|
||||
<MessageSquare className="w-4 h-4" />
|
||||
Internal team communication
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => navigate("/staff/dashboard")}
|
||||
variant="outline"
|
||||
className="border-purple-500/30 hover:bg-purple-500/10"
|
||||
>
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
Back
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6 h-[600px]">
|
||||
{/* Channels Sidebar */}
|
||||
<Card className="bg-slate-900/50 border-purple-500/20 lg:col-span-1">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">Channels</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
{CHANNELS.map((channel) => (
|
||||
<button
|
||||
key={channel.id}
|
||||
onClick={() => setSelectedChannel(channel)}
|
||||
className={`w-full text-left px-4 py-3 rounded-lg transition-all ${
|
||||
selectedChannel.id === channel.id
|
||||
? "bg-purple-600/30 border border-purple-500/50"
|
||||
: "hover:bg-purple-600/10 border border-transparent"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{channel.type === "locked" ? (
|
||||
<Lock className="w-4 h-4 text-yellow-400" />
|
||||
) : (
|
||||
<Hash className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<p className="text-white font-medium">#{channel.name}</p>
|
||||
<p className="text-gray-400 text-xs">
|
||||
{channel.members} members
|
||||
</p>
|
||||
</div>
|
||||
{channel.unread > 0 && (
|
||||
<Badge className="bg-red-500/20 text-red-300">
|
||||
{channel.unread}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Chat Area */}
|
||||
<Card className="bg-slate-900/50 border-purple-500/20 lg:col-span-3 flex flex-col">
|
||||
{/* Channel Header */}
|
||||
<CardHeader className="border-b border-purple-500/20">
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
{selectedChannel.type === "locked" ? (
|
||||
<Lock className="w-4 h-4 text-yellow-400" />
|
||||
) : (
|
||||
<Hash className="w-4 h-4 text-gray-400" />
|
||||
)}
|
||||
{selectedChannel.name}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
{/* Messages */}
|
||||
<CardContent className="flex-1 overflow-y-auto py-6 space-y-4">
|
||||
{MESSAGES.map((msg) => (
|
||||
<div
|
||||
key={msg.id}
|
||||
className={`flex ${msg.isOwn ? "justify-end" : "justify-start"}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-xs px-4 py-2 rounded-lg ${
|
||||
msg.isOwn
|
||||
? "bg-purple-600/30 text-white"
|
||||
: "bg-slate-800/50 text-gray-300"
|
||||
}`}
|
||||
>
|
||||
{!msg.isOwn && (
|
||||
<p className="text-sm font-semibold text-gray-300">
|
||||
{msg.author}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-sm">{msg.content}</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{msg.timestamp}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
|
||||
{/* Input */}
|
||||
<div className="border-t border-purple-500/20 p-4">
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
placeholder="Type a message..."
|
||||
value={message}
|
||||
onChange={(e) => setMessage(e.target.value)}
|
||||
onKeyPress={(e) =>
|
||||
e.key === "Enter" && handleSend()
|
||||
}
|
||||
className="bg-slate-800/50 border-purple-500/20 text-white placeholder:text-gray-500"
|
||||
/>
|
||||
<Button
|
||||
onClick={handleSend}
|
||||
className="bg-purple-600 hover:bg-purple-700"
|
||||
disabled={!message.trim()}
|
||||
>
|
||||
<Send className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue