148 lines
7.2 KiB
JavaScript
148 lines
7.2 KiB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
ChevronLeft,
|
|
MoreVertical,
|
|
Send,
|
|
Paperclip,
|
|
Image as ImageIcon,
|
|
Smile,
|
|
CheckCheck,
|
|
Mic
|
|
} from 'lucide-react';
|
|
|
|
export default function EmployerChatDetail({ id }) {
|
|
const [message, setMessage] = useState('');
|
|
const [messages, setMessages] = useState([
|
|
{ id: 1, sender: 'them', text: 'Hello! Is the site supervisor position still available?', time: '10:30 AM' },
|
|
{ id: 2, sender: 'me', text: 'Hi Sarah! Yes, it is. We are currently reviewing applications.', time: '10:32 AM' },
|
|
{ id: 3, sender: 'them', text: 'Great! I have over 8 years of experience in Dubai. Would you like me to send my CV?', time: '10:35 AM' },
|
|
{ id: 4, sender: 'me', text: 'That would be excellent. Please send it over here.', time: '10:36 AM' },
|
|
{ id: 5, sender: 'them', text: 'Sure, here it is. I also have pediatric first aid certification.', time: '10:40 AM' },
|
|
]);
|
|
|
|
const messagesEndRef = useRef(null);
|
|
|
|
const scrollToBottom = () => {
|
|
messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
|
|
};
|
|
|
|
useEffect(() => {
|
|
scrollToBottom();
|
|
}, [messages]);
|
|
|
|
const handleSend = (e) => {
|
|
if (e) e.preventDefault();
|
|
if (!message.trim()) return;
|
|
|
|
const newMessage = {
|
|
id: messages.length + 1,
|
|
sender: 'me',
|
|
text: message,
|
|
time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
|
};
|
|
|
|
setMessages([...messages, newMessage]);
|
|
setMessage('');
|
|
};
|
|
|
|
// Mock data for the specific chat
|
|
const chatInfo = {
|
|
id: id,
|
|
name: 'Sarah Connor',
|
|
initial: 'S',
|
|
online: true,
|
|
role: 'Site Supervisor'
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F8FAFC] flex flex-col max-w-md mx-auto relative font-sans text-slate-900">
|
|
<Head title={`Chat with ${chatInfo.name}`} />
|
|
|
|
{/* Chat Header */}
|
|
<div className="bg-white px-6 pt-12 pb-6 flex items-center justify-between border-b border-slate-100 sticky top-0 z-50">
|
|
<div className="flex items-center space-x-4">
|
|
<button onClick={() => window.history.back()} className="p-2 bg-slate-50 rounded-xl text-slate-400 border border-slate-100">
|
|
<ChevronLeft className="w-5 h-5" />
|
|
</button>
|
|
<div className="flex items-center space-x-3">
|
|
<div className="relative">
|
|
<div className="w-10 h-10 rounded-full bg-[#D8F3FF] flex items-center justify-center text-[#185FA5] font-bold text-sm">
|
|
{chatInfo.initial}
|
|
</div>
|
|
{chatInfo.online && (
|
|
<div className="absolute bottom-0 right-0 w-3 h-3 bg-emerald-500 border-2 border-white rounded-full shadow-sm" />
|
|
)}
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<h4 className="font-bold text-sm leading-none">{chatInfo.name}</h4>
|
|
<p className="text-[10px] font-bold text-emerald-500 uppercase tracking-widest">Online Now</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<button className="p-2.5 text-slate-400 hover:text-[#185FA5] transition-colors">
|
|
<MoreVertical className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Messages Area */}
|
|
<div className="flex-1 overflow-y-auto p-6 space-y-6 no-scrollbar pb-32">
|
|
<div className="flex justify-center">
|
|
<span className="px-4 py-1.5 bg-slate-100 rounded-full text-[10px] font-bold text-slate-400 uppercase tracking-widest">Today</span>
|
|
</div>
|
|
|
|
{messages.map((msg) => (
|
|
<div key={msg.id} className={`flex ${msg.sender === 'me' ? 'justify-end' : 'justify-start'}`}>
|
|
<div className={`max-w-[80%] space-y-1.5`}>
|
|
<div className={`px-5 py-4 rounded-[28px] text-[13px] font-medium leading-relaxed shadow-sm ${
|
|
msg.sender === 'me'
|
|
? 'bg-[#185FA5] text-white rounded-tr-none'
|
|
: 'bg-white text-slate-600 rounded-tl-none border border-slate-100'
|
|
}`}>
|
|
{msg.text}
|
|
</div>
|
|
<div className={`flex items-center space-x-1.5 px-2 ${msg.sender === 'me' ? 'justify-end' : 'justify-start'}`}>
|
|
<span className="text-[9px] font-bold text-slate-300 uppercase tracking-widest">{msg.time}</span>
|
|
{msg.sender === 'me' && <CheckCheck className="w-3 h-3 text-emerald-500" />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div ref={messagesEndRef} />
|
|
</div>
|
|
|
|
{/* Input Area */}
|
|
<form onSubmit={handleSend} className="fixed bottom-0 left-0 right-0 max-w-md mx-auto p-6 bg-white/80 backdrop-blur-xl border-t border-slate-100">
|
|
<div className="flex items-center space-x-3 bg-slate-50 border border-slate-100 rounded-[28px] px-4 py-2">
|
|
<button type="button" className="p-2 text-slate-300 hover:text-[#185FA5] transition-colors">
|
|
<Paperclip className="w-5 h-5" />
|
|
</button>
|
|
<input
|
|
type="text"
|
|
placeholder="Type a message..."
|
|
value={message}
|
|
onChange={(e) => setMessage(e.target.value)}
|
|
className="flex-1 bg-transparent border-none text-sm font-medium focus:ring-0 placeholder-slate-300 text-slate-700 h-12"
|
|
/>
|
|
<div className="flex items-center space-x-1">
|
|
<button type="button" className="p-2 text-slate-300">
|
|
<Smile className="w-5 h-5" />
|
|
</button>
|
|
{message.trim() ? (
|
|
<button type="submit" className="w-10 h-10 bg-[#185FA5] text-white rounded-full flex items-center justify-center shadow-lg shadow-blue-500/30 active:scale-90 transition-transform">
|
|
<Send className="w-4 h-4 ml-0.5" />
|
|
</button>
|
|
) : (
|
|
<button type="button" className="w-10 h-10 bg-slate-100 text-[#185FA5] rounded-full flex items-center justify-center active:scale-90 transition-transform">
|
|
<Mic className="w-5 h-5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|