51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import { FaCalendarAlt } from 'react-icons/fa'
|
|
import dayjs from 'dayjs'
|
|
import { EventDto } from '@/proxy/intranet/models'
|
|
import useLocale from '@/utils/hooks/useLocale'
|
|
import { currentLocalDate } from '@/utils/dateUtils'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
|
|
const UpcomingEvents: React.FC<{ events: EventDto[] }> = ({ events }) => {
|
|
const currentLocale = useLocale()
|
|
const { translate } = useLocalization();
|
|
|
|
const upcomingEvents = events.filter(
|
|
(event) =>
|
|
event.isPublished &&
|
|
dayjs(event.date).isAfter(dayjs()) &&
|
|
dayjs(event.date).isBefore(dayjs().add(7, 'day')),
|
|
)
|
|
|
|
return (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
|
|
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
|
<h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
|
<FaCalendarAlt className="w-5 h-5" />
|
|
{translate('::App.Platform.Intranet.Widgets.UpcomingEvents.Title')}
|
|
</h2>
|
|
</div>
|
|
<div className="p-4 space-y-3">
|
|
{upcomingEvents.length > 0 ? (
|
|
upcomingEvents.slice(0, 3).map((event) => (
|
|
<div
|
|
key={event.id}
|
|
className="p-3 rounded-lg border-l-4 bg-gray-50 dark:bg-gray-700/50 border-l-green-500"
|
|
>
|
|
<h4 className="text-sm font-medium text-gray-900 dark:text-white">{event.name}</h4>
|
|
<p className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
{currentLocalDate(event.date, currentLocale || 'tr')} - {event.place}
|
|
</p>
|
|
</div>
|
|
))
|
|
) : (
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
|
{translate('::App.Platform.Intranet.Widgets.UpcomingEvents.NoEvent')}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default UpcomingEvents
|