91 lines
5.0 KiB
JavaScript
91 lines
5.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import EmployerMobileLayout from './Layouts/EmployerMobileLayout';
|
|
import {
|
|
Megaphone,
|
|
Calendar,
|
|
ArrowRight,
|
|
Search,
|
|
Plus,
|
|
X
|
|
} from 'lucide-react';
|
|
|
|
export default function EmployerAnnouncements() {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
|
|
const announcements = [
|
|
{ id: 1, title: 'Ramadan Working Hours Update', date: 'May 12, 2026', content: 'Please note the revised working hours for all domestic staff during the upcoming Holy Month of Ramadan...', priority: 'High' },
|
|
{ id: 2, title: 'New Visa Regulations 2026', date: 'May 08, 2026', content: 'The Ministry of Human Resources has announced new updates regarding domestic worker visa renewals...', priority: 'Normal' },
|
|
{ id: 3, title: 'Marketplace Service Maintenance', date: 'May 05, 2026', content: 'Our platform will undergo scheduled maintenance on Sunday from 2:00 AM to 4:00 AM...', priority: 'Low' },
|
|
];
|
|
|
|
return (
|
|
<EmployerMobileLayout>
|
|
<Head title="Announcements" />
|
|
|
|
<div className="p-6 space-y-8">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="space-y-1">
|
|
<h1 className="text-2xl font-bold tracking-tight">Broadcasts</h1>
|
|
<p className="text-sm text-slate-500 font-medium">Important updates & announcements</p>
|
|
</div>
|
|
<button className="w-12 h-12 bg-[#141B34] text-white rounded-2xl flex items-center justify-center shadow-lg active:scale-95 transition-all">
|
|
<Plus className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search */}
|
|
<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 announcements..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(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>
|
|
|
|
{/* Announcement List */}
|
|
<div className="space-y-4 pb-10">
|
|
{announcements.map((item) => (
|
|
<div key={item.id} className="bg-white p-6 rounded-3xl border border-slate-100 shadow-sm space-y-4 active:scale-[0.98] transition-all group">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-10 h-10 rounded-xl bg-blue-50 flex items-center justify-center text-blue-600">
|
|
<Megaphone className="w-5 h-5" />
|
|
</div>
|
|
<div className="space-y-0.5">
|
|
<h4 className="font-bold text-slate-900 text-sm leading-tight">{item.title}</h4>
|
|
<div className="flex items-center space-x-1 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
|
|
<Calendar className="w-3 h-3" />
|
|
<span>{item.date}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs text-slate-500 leading-relaxed font-medium line-clamp-2">
|
|
{item.content}
|
|
</p>
|
|
|
|
<div className="flex items-center justify-between pt-2 border-t border-slate-50">
|
|
<div className={`px-2.5 py-1 rounded-lg text-[9px] font-bold uppercase tracking-widest ${
|
|
item.priority === 'High' ? 'bg-rose-50 text-rose-500 border border-rose-100' : 'bg-slate-50 text-slate-400 border border-slate-100'
|
|
}`}>
|
|
{item.priority} Priority
|
|
</div>
|
|
<button className="text-xs font-bold text-[#141B34] flex items-center space-x-1 group-hover:translate-x-1 transition-transform">
|
|
<span>Read More</span>
|
|
<ArrowRight className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</EmployerMobileLayout>
|
|
);
|
|
}
|