80 lines
4.7 KiB
JavaScript
80 lines
4.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerMobileLayout from './Layouts/EmployerMobileLayout';
|
|
import { Search, MoreHorizontal, CheckCheck } from 'lucide-react';
|
|
|
|
export default function EmployerMessages() {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
const chats = [
|
|
{ id: 1, name: 'Sarah Connor', preview: 'Is the site supervisor position still available?', time: '2m ago', unread: 2, online: true },
|
|
{ id: 2, name: 'Marketplace Support', preview: 'Your account verification is complete.', time: '1h ago', unread: 0, online: true },
|
|
{ id: 3, name: 'Maria Garcia', preview: 'I can start from next Monday. Looking forward to it!', time: '3h ago', unread: 0, online: false },
|
|
{ id: 4, name: 'Elena Gilbert', preview: 'Thank you for the opportunity.', time: 'Yesterday', unread: 0, online: false },
|
|
{ id: 5, name: 'John Smith', preview: 'Attached are my certificates for review.', time: 'Yesterday', unread: 0, online: false },
|
|
];
|
|
|
|
return (
|
|
<EmployerMobileLayout>
|
|
<Head title="Messages" />
|
|
|
|
<div className="flex flex-col h-full">
|
|
{/* Search Bar */}
|
|
<div className="p-6 pb-2">
|
|
<div className="relative group">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300 group-focus-within:text-[#141B34] transition-colors" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search conversations..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full pl-12 pr-4 py-4 bg-white border border-slate-200 rounded-2xl text-sm focus:ring-4 focus:ring-slate-100 focus:border-slate-300 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Chat List */}
|
|
<div className="flex-1 overflow-y-auto no-scrollbar pb-10">
|
|
<div className="divide-y divide-slate-100">
|
|
{chats.map((chat) => (
|
|
<Link
|
|
key={chat.id}
|
|
href={`/mobile/employer/chat/${chat.id}`}
|
|
className="flex items-center p-6 bg-white active:bg-slate-50 transition-all space-x-4"
|
|
>
|
|
<div className="relative shrink-0">
|
|
<div className="w-14 h-14 rounded-full bg-slate-100 border border-slate-200 flex items-center justify-center text-[#141B34] font-bold text-xl">
|
|
{chat.name.charAt(0)}
|
|
</div>
|
|
{chat.online && (
|
|
<div className="absolute bottom-0.5 right-0.5 w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full" />
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 min-w-0 space-y-1">
|
|
<div className="flex items-center justify-between">
|
|
<h4 className="font-bold text-slate-900 text-[15px] truncate">{chat.name}</h4>
|
|
<span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest">{chat.time}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<p className={`text-xs truncate max-w-[200px] ${chat.unread > 0 ? 'text-slate-900 font-bold' : 'text-slate-500 font-medium'}`}>
|
|
{chat.preview}
|
|
</p>
|
|
{chat.unread > 0 ? (
|
|
<div className="w-5 h-5 bg-[#185FA5] text-white text-[10px] font-bold rounded-full flex items-center justify-center border border-white">
|
|
{chat.unread}
|
|
</div>
|
|
) : (
|
|
<CheckCheck className="w-4 h-4 text-slate-300" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</EmployerMobileLayout>
|
|
);
|
|
}
|