Spaces:
Paused
Paused
File size: 3,982 Bytes
5a81b95 | 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 | /**
* SlackStatusWidget - Team Presence & Quick Message
*/
import React, { useState } from 'react';
import { MessageCircle, Users, Send, Circle } from 'lucide-react';
import { useLiveData } from '@/hooks/useLiveData';
import { useWidgetCommunication } from '@/contexts/WidgetContext';
import { cn } from '@/lib/utils';
export default function SlackStatusWidget({ widgetId }: { widgetId: string }) {
const [message, setMessage] = useState('');
const { data } = useLiveData({
widgetId,
widgetType: 'slack',
requiredSources: ['slack-api'],
autoConnect: true,
pollInterval: 30000,
});
const { broadcastEvent } = useWidgetCommunication(widgetId);
const team = data?.team || [];
const unreadChannels = data?.unreadChannels || 0;
const handleSendMessage = () => {
if (!message.trim()) return;
broadcastEvent({
type: 'slack.message.sent',
data: { message },
});
setMessage('');
};
return (
<div className="h-full flex flex-col bg-gradient-to-br from-amber-500/10 to-orange-500/10 backdrop-blur-sm border border-amber-500/30 rounded-lg overflow-hidden">
<div className="p-4 border-b border-amber-500/20">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<MessageCircle className="w-5 h-5 text-amber-400" />
<span className="font-display text-sm uppercase tracking-wider text-amber-400">Slack</span>
</div>
{unreadChannels > 0 && (
<div className="px-2 py-1 bg-amber-500 text-white rounded-full text-xs">
{unreadChannels}
</div>
)}
</div>
</div>
<div className="p-4 space-y-3">
<div className="text-xs text-amber-300 mb-2 flex items-center gap-2">
<Users className="w-4 h-4" />
Team Status
</div>
{team.slice(0, 5).map((member: any) => (
<div key={member.id} className="flex items-center gap-3">
<Circle className={cn(
"w-2 h-2",
member.status === 'active' && "fill-green-400 text-green-400",
member.status === 'away' && "fill-yellow-400 text-yellow-400",
member.status === 'offline' && "fill-gray-400 text-gray-400"
)} />
<div className="flex-1">
<div className="text-sm text-white">{member.name}</div>
<div className="text-xs text-amber-300/50">{member.timezone}</div>
</div>
</div>
))}
</div>
<div className="mt-auto p-3 border-t border-amber-500/20 bg-black/20">
<div className="flex gap-2">
<input
type="text"
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyDown={(e) => e.key === 'Enter' && handleSendMessage()}
placeholder="Quick message..."
className="flex-1 px-3 py-2 bg-white/5 border border-amber-500/30 rounded text-sm text-white placeholder-amber-300/50 focus:outline-none focus:border-amber-500"
/>
<button
onClick={handleSendMessage}
className="p-2 bg-amber-500 hover:bg-amber-600 rounded transition-colors"
>
<Send className="w-4 h-4 text-white" />
</button>
</div>
</div>
</div>
);
}
|