src/components/DynamicMeetups.jsx - develop - superwizard/jjoy-site

src/components/DynamicMeetups.jsx
71 строка2 KB
Denis Burlaka
Митапы
08 сен 2025, 23:12
08 сен 2025, 23:121f2c242
import React, { useEffect, useState } from 'react';

const DynamicMeetups = ({ meetups }) => {
	const [currentTime, setCurrentTime] = useState(new Date());

	useEffect(() => {
		const timer = setInterval(() => {
			setCurrentTime(new Date());
		}, 600_000);

		return () => clearInterval(timer);
	}, []);

	const isFuturePost = (pubDate) => {
		return pubDate > currentTime;
	};

	return (
		<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
			{meetups && meetups.map(meetup => {
				const isFuture = isFuturePost(meetup.data.pubDate);
				return (
					<div key={meetup.id}
							className={`p-6 rounded-lg shadow-lg transition-transform duration-300 hover:scale-[1.02] ${
								isFuture 
									? 'bg-gradient-to-br from-red-50 to-rose-50 border-l-4 border-red-500' 
									: 'bg-gradient-to-br from-gray-100 to-gray-200 border-l-4 border-gray-400 opacity-80'
							}`}>

						{/* Бейдж статуса */}
						<div className="mb-4">
							<span className={`text-xs font-bold px-3 py-1 rounded-full ${
								isFuture 
									? 'bg-red-500 text-white' 
									: 'bg-gray-500 text-white'
							}`}>
								{isFuture ? 'СКОРО' : 'ПРОШЛО'}
							</span>
						</div>

						<p className={`text-sm mb-2 ${isFuture ? 'text-red-600' : 'text-gray-500'}`}>
							📅 {meetup.data.pubDate.toLocaleDateString('ru-RU')}
						</p>

						{meetup.data.place && (
							<p className={`text-sm mb-2 ${isFuture ? 'text-red-600' : 'text-gray-500'}`}>
								📍 {meetup.data.place}
							</p>
						)}

						<h3 className={`text-lg font-bold mb-3 ${isFuture ? 'text-red-700' : 'text-gray-700'}`}>
							{meetup.data.title}
						</h3>

						<p className={`text-sm mb-4 ${isFuture ? 'text-red-600' : 'text-gray-600'}`}>
							{meetup.data.description}
						</p>

						{meetup.data.authors && (
							<p className={`text-xs italic ${isFuture ? 'text-red-500' : 'text-gray-500'}`}>
								🎤 {meetup.data.authors.join(', ')}
							</p>
						)}
					</div>
				);
			})}
		</div>
	);
};

export default DynamicMeetups;