89 lines
4.3 KiB
JavaScript
89 lines
4.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
Home,
|
|
MessageCircle,
|
|
User,
|
|
Briefcase,
|
|
ArrowLeft,
|
|
Search,
|
|
Send,
|
|
MoreVertical,
|
|
CheckCheck,
|
|
Mic,
|
|
Image as ImageIcon,
|
|
Paperclip,
|
|
Bell
|
|
} from 'lucide-react';
|
|
|
|
export default function WorkerChat() {
|
|
const [messages, setMessages] = useState([
|
|
{ id: 1, text: "Hello Danial, are you available for an interview?", time: "09:41 AM", sender: "employer" },
|
|
{ id: 2, text: "Yes ma'am, I am available tomorrow morning.", time: "09:42 AM", sender: "me" },
|
|
{ id: 3, text: "Great! Let's connect at 10 AM.", time: "09:45 AM", sender: "employer" },
|
|
]);
|
|
|
|
const [input, setInput] = useState("");
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F9F9F9] font-sans text-slate-900 flex flex-col max-w-md mx-auto shadow-2xl relative overflow-hidden">
|
|
<Head title="Chat" />
|
|
|
|
{/* Header */}
|
|
<div className="px-6 pt-12 pb-4 bg-white flex items-center justify-between border-b border-slate-50 sticky top-0 z-50">
|
|
<button onClick={() => window.history.back()} className="w-10 h-10 flex items-center justify-center text-slate-900">
|
|
<ArrowLeft className="w-5 h-5" />
|
|
</button>
|
|
<div className="text-center">
|
|
<h1 className="text-xs font-black uppercase tracking-widest">Al Mansoor</h1>
|
|
<span className="text-[8px] text-emerald-500 font-black uppercase tracking-widest">Online</span>
|
|
</div>
|
|
<button className="w-10 h-10 flex items-center justify-center text-slate-900">
|
|
<MoreVertical className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Message Area */}
|
|
<div className="flex-1 overflow-y-auto px-6 py-8 space-y-6">
|
|
{messages.map((msg) => (
|
|
<div key={msg.id} className={`flex ${msg.sender === 'me' ? 'justify-end' : 'justify-start'}`}>
|
|
<div className={`max-w-[80%] p-4 rounded-[28px] ${
|
|
msg.sender === 'me'
|
|
? 'bg-[#185FA5] text-white rounded-tr-none shadow-lg shadow-blue-500/10'
|
|
: 'bg-white text-slate-700 rounded-tl-none border border-slate-50 shadow-sm'
|
|
}`}>
|
|
<p className="text-xs font-medium leading-relaxed">{msg.text}</p>
|
|
<div className={`flex items-center justify-end space-x-1 mt-2 ${msg.sender === 'me' ? 'text-blue-100/60' : 'text-slate-300'}`}>
|
|
<span className="text-[8px] font-black uppercase">{msg.time}</span>
|
|
{msg.sender === 'me' && <CheckCheck className="w-3 h-3" />}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Input Bar */}
|
|
<div className="p-6 bg-white border-t border-slate-50">
|
|
<div className="flex items-center space-x-3">
|
|
<button className="w-12 h-12 rounded-2xl bg-slate-50 text-slate-400 flex items-center justify-center active:scale-95 transition-all">
|
|
<Paperclip className="w-5 h-5" />
|
|
</button>
|
|
<div className="flex-1 relative">
|
|
<input
|
|
type="text"
|
|
placeholder="Write your message..."
|
|
className="w-full pl-6 pr-14 py-4 bg-slate-50 border-none rounded-2xl text-[11px] font-black uppercase tracking-tight focus:ring-4 focus:ring-blue-100 transition-all outline-none"
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
/>
|
|
<button className="absolute right-2 top-1/2 -translate-y-1/2 w-10 h-10 bg-[#185FA5] text-white rounded-xl flex items-center justify-center shadow-lg active:scale-95 transition-all">
|
|
<Send className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|