96 lines
5.3 KiB
JavaScript
96 lines
5.3 KiB
JavaScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
Home,
|
|
MessageCircle,
|
|
User,
|
|
Compass,
|
|
Bell,
|
|
Calendar,
|
|
ChevronRight,
|
|
Megaphone,
|
|
Search,
|
|
ArrowLeft,
|
|
Clock
|
|
} from 'lucide-react';
|
|
|
|
export default function WorkerAnnouncements() {
|
|
const announcements = [
|
|
{ id: 1, title: "NEW PLATFORM UPDATE", date: "2 HOURS AGO", text: "We have simplified the verification process for all workers. Check your profile for details.", category: "SYSTEM" },
|
|
{ id: 2, title: "SAFETY GUIDELINES", date: "YESTERDAY", text: "Please review our updated safety protocols for household interviews.", category: "SECURITY" },
|
|
{ id: 3, title: "RAMADAN HOURS", date: "2 DAYS AGO", text: "Special support hours during the holy month of Ramadan have been updated.", category: "GENERAL" },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen bg-white font-sans text-slate-900 flex flex-col max-w-md mx-auto shadow-2xl relative overflow-hidden pb-24">
|
|
<Head title="Updates" />
|
|
|
|
{/* Header */}
|
|
<div className="px-6 pt-12 pb-6 bg-white sticky top-0 z-50">
|
|
<div className="relative">
|
|
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-300" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search updates..."
|
|
className="w-full pl-12 pr-6 py-4 bg-[#F8FAFC] border-none rounded-2xl text-[11px] font-black uppercase tracking-tight shadow-sm focus:ring-4 focus:ring-blue-100 outline-none transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex-1 px-6 space-y-6 overflow-y-auto">
|
|
{/* Section Title */}
|
|
<div className="flex items-center space-x-2 pt-4 px-1">
|
|
<Megaphone className="w-4 h-4 text-[#185FA5]" />
|
|
<h2 className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Latest Updates</h2>
|
|
</div>
|
|
|
|
{/* Cards */}
|
|
<div className="space-y-6 pb-10">
|
|
{announcements.map((item) => (
|
|
<div key={item.id} className="bg-white p-8 rounded-[40px] border border-slate-100 shadow-xl shadow-slate-200/40 space-y-4 active:scale-[0.98] transition-all">
|
|
<div className="flex items-center justify-between">
|
|
<span className="bg-blue-50 text-[#185FA5] px-4 py-1.5 rounded-full text-[9px] font-black uppercase tracking-[0.1em]">{item.category}</span>
|
|
<div className="flex items-center text-[9px] font-black text-slate-300 uppercase tracking-widest">
|
|
<Calendar className="w-3 h-3 mr-1.5" /> {item.date}
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3">
|
|
<h3 className="font-black text-slate-900 text-[13px] uppercase tracking-tight leading-tight">{item.title}</h3>
|
|
<p className="text-xs text-slate-500 leading-relaxed font-medium">{item.text}</p>
|
|
</div>
|
|
<button className="flex items-center text-[10px] font-black text-[#185FA5] uppercase tracking-[0.1em] pt-2">
|
|
Read More <ChevronRight className="w-3 h-3 ml-1" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Navigation */}
|
|
<div className="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white/90 backdrop-blur-xl border-t border-slate-100 px-6 py-4 flex items-center justify-between z-50">
|
|
<Link href="/mobile/worker/home" className="flex flex-col items-center space-y-1 text-slate-300">
|
|
<Home className="w-5 h-5" />
|
|
<span className="text-[8px] font-black uppercase tracking-tight">Home</span>
|
|
</Link>
|
|
<Link href="/mobile/worker/explore" className="flex flex-col items-center space-y-1 text-slate-300">
|
|
<Compass className="w-5 h-5" />
|
|
<span className="text-[8px] font-black uppercase tracking-tight">Explore</span>
|
|
</Link>
|
|
<Link href="/mobile/worker/announcements" className="flex flex-col items-center space-y-1 text-[#185FA5]">
|
|
<Bell className="w-5 h-5 fill-current" />
|
|
<span className="text-[8px] font-black uppercase tracking-tight">Updates</span>
|
|
</Link>
|
|
<Link href="/mobile/worker/chat" className="flex flex-col items-center space-y-1 text-slate-300">
|
|
<MessageCircle className="w-5 h-5" />
|
|
<span className="text-[8px] font-black uppercase tracking-tight">Chat</span>
|
|
</Link>
|
|
<Link href="/mobile/worker/profile" className="flex flex-col items-center space-y-1 text-slate-300">
|
|
<User className="w-5 h-5" />
|
|
<span className="text-[8px] font-black uppercase tracking-tight">Profile</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|