100 lines
3.8 KiB
TypeScript
100 lines
3.8 KiB
TypeScript
import { Link } from 'react-router-dom'
|
||
import { events } from '@/data/events'
|
||
import type { Event } from '@/data/events'
|
||
|
||
const typeLabel: Record<Event['type'], string> = {
|
||
conference: 'کنگره',
|
||
exhibition: 'نمایشگاه',
|
||
seminar: 'سمینار',
|
||
international: 'جهانی',
|
||
}
|
||
|
||
const typeBorderColor: Record<Event['type'], string> = {
|
||
conference: 'var(--ink)',
|
||
exhibition: '#6b4a00',
|
||
seminar: '#1a4a2a',
|
||
international: 'var(--red)',
|
||
}
|
||
|
||
const typeTextColor: Record<Event['type'], string> = {
|
||
conference: 'var(--ink)',
|
||
exhibition: '#6b4a00',
|
||
seminar: '#1a4a2a',
|
||
international: 'var(--red)',
|
||
}
|
||
|
||
export default function EventsSection() {
|
||
const displayed = events.slice(0, 4)
|
||
|
||
return (
|
||
<section style={{ borderBottom: '2px solid var(--ink)', background: 'var(--paper-2)' }}>
|
||
<div className="max-w-7xl mx-auto px-12 py-20 max-md:px-5 max-md:py-14">
|
||
{/* Sleek top row */}
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 24 }}>
|
||
<Link to="/events" style={{ fontSize: '10px', fontWeight: 700, textTransform: 'uppercase', color: 'var(--ink-4)', textDecoration: 'none' }}>تقویم کامل ←</Link>
|
||
</div>
|
||
|
||
{/* 4-col grid */}
|
||
<div
|
||
className="grid grid-cols-4 max-md:grid-cols-2 max-sm:grid-cols-1"
|
||
>
|
||
{displayed.map((event) => (
|
||
<div
|
||
key={event.id}
|
||
style={{
|
||
padding: '32px 28px',
|
||
}}
|
||
className="border-r border-[var(--rule-thin)] first:border-r-0 max-md:border-r-0 max-md:border-b max-md:border-[var(--rule-thin)] max-md:nth-child(even):border-r max-md:nth-child(even):border-[var(--rule-thin)] max-sm:border-r-0 max-sm:border-b max-sm:last:border-b-0 max-md:nth-child(3):border-b-0 max-md:nth-child(4):border-b-0"
|
||
>
|
||
{/* Date block */}
|
||
<div style={{ borderBottom: '2px solid var(--ink)', paddingBottom: 12, marginBottom: 16 }}>
|
||
<div style={{ fontSize: 52, fontWeight: 900, lineHeight: 1, color: 'var(--ink)' }}>
|
||
{event.date.toLocaleString('fa-IR')}
|
||
</div>
|
||
<div style={{ fontSize: 12, color: 'var(--ink-4)', marginTop: 2 }}>
|
||
{event.month} {event.year.toLocaleString('fa-IR')}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Type pill */}
|
||
<div style={{ marginBottom: 12 }}>
|
||
<span
|
||
style={{
|
||
display: 'inline-block',
|
||
border: `1px solid ${typeBorderColor[event.type]}`,
|
||
color: typeTextColor[event.type],
|
||
fontSize: 9,
|
||
fontWeight: 700,
|
||
textTransform: 'uppercase',
|
||
padding: '3px 8px',
|
||
lineHeight: 1.4,
|
||
}}
|
||
>
|
||
{typeLabel[event.type]}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<div style={{ fontSize: 14, fontWeight: 700, color: 'var(--ink)', lineHeight: 1.4, marginBottom: 6 }}>{event.title}</div>
|
||
|
||
{/* Location */}
|
||
<div style={{ fontSize: 11, color: 'var(--ink-5)', marginBottom: 14 }}>{event.location} · {event.city}</div>
|
||
|
||
{/* CTA */}
|
||
{event.registrationOpen ? (
|
||
<Link to="#" style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', color: 'var(--red)', textDecoration: 'none', cursor: 'pointer' }}>
|
||
ثبتنام ←
|
||
</Link>
|
||
) : (
|
||
<span style={{ fontSize: 10, color: 'var(--ink-5)', textTransform: 'uppercase', fontWeight: 700 }}>
|
||
بهزودی
|
||
</span>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|