85 lines
3.6 KiB
TypeScript
85 lines
3.6 KiB
TypeScript
|
import React from 'react'
|
||
|
|
import { FaBell, FaEye } from 'react-icons/fa'
|
||
|
|
import dayjs from 'dayjs'
|
||
|
|
import { mockAnnouncements, Announcement } from '../../../mocks/mockIntranetData'
|
||
|
|
|
||
|
|
interface ImportantAnnouncementsProps {
|
||
|
|
onAnnouncementClick: (announcement: Announcement) => void
|
||
|
|
}
|
||
|
|
|
||
|
|
const ImportantAnnouncements: React.FC<ImportantAnnouncementsProps> = ({ onAnnouncementClick }) => {
|
||
|
|
const pinnedAnnouncements = mockAnnouncements.filter((a) => a.isPinned).slice(0, 3)
|
||
|
|
|
||
|
|
const getCategoryColor = (category: string) => {
|
||
|
|
const colors: Record<string, string> = {
|
||
|
|
general: 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300',
|
||
|
|
hr: 'bg-purple-100 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300',
|
||
|
|
it: 'bg-orange-100 dark:bg-orange-900/30 text-orange-700 dark:text-orange-300',
|
||
|
|
event: 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-300',
|
||
|
|
urgent: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300',
|
||
|
|
}
|
||
|
|
return colors[category] || colors.general
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
||
|
|
<div className="p-6 border-b border-gray-200 dark:border-gray-700">
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||
|
|
<FaBell className="w-5 h-5" />
|
||
|
|
Önemli Duyurular
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="divide-y divide-gray-200 dark:divide-gray-700">
|
||
|
|
{pinnedAnnouncements.map((announcement) => (
|
||
|
|
<div
|
||
|
|
key={announcement.id}
|
||
|
|
onClick={() => onAnnouncementClick(announcement)}
|
||
|
|
className="p-6 hover:bg-gray-50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors"
|
||
|
|
>
|
||
|
|
<div className="flex items-start gap-4">
|
||
|
|
<img
|
||
|
|
src={announcement.author.avatar}
|
||
|
|
alt={announcement.author.fullName}
|
||
|
|
className="w-10 h-10 rounded-full"
|
||
|
|
/>
|
||
|
|
<div className="flex-1 min-w-0">
|
||
|
|
<div className="flex items-center gap-2 mb-2">
|
||
|
|
<h3 className="text-base font-semibold text-gray-900 dark:text-white">
|
||
|
|
{announcement.title}
|
||
|
|
</h3>
|
||
|
|
<span
|
||
|
|
className={`px-2 py-1 text-xs rounded-full ${getCategoryColor(announcement.category)}`}
|
||
|
|
>
|
||
|
|
{announcement.category === 'general' && 'Genel'}
|
||
|
|
{announcement.category === 'hr' && 'İK'}
|
||
|
|
{announcement.category === 'it' && 'IT'}
|
||
|
|
{announcement.category === 'event' && 'Etkinlik'}
|
||
|
|
{announcement.category === 'urgent' && 'Acil'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
|
||
|
|
{announcement.excerpt}
|
||
|
|
</p>
|
||
|
|
<div className="flex items-center gap-4 mt-3 text-xs text-gray-500 dark:text-gray-400">
|
||
|
|
<span>{announcement.author.fullName}</span>
|
||
|
|
<span>•</span>
|
||
|
|
<span>{dayjs(announcement.publishDate).fromNow()}</span>
|
||
|
|
<span>•</span>
|
||
|
|
<span className="flex items-center gap-1">
|
||
|
|
<FaEye className="w-3 h-3" />
|
||
|
|
{announcement.viewCount}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ImportantAnnouncements
|