91 lines
2.4 KiB
TypeScript
91 lines
2.4 KiB
TypeScript
'use client'
|
||
|
||
import { EventCard } from '@/entities/event'
|
||
import type { Event } from '@/entities/event'
|
||
import { GlitchText, Button } from '@/shared/ui'
|
||
import Link from 'next/link'
|
||
|
||
interface EventsTimelineProps {
|
||
events: Event[]
|
||
title?: string
|
||
showViewAll?: boolean
|
||
variant?: 'grid' | 'list' | 'featured'
|
||
}
|
||
|
||
export function EventsTimeline({
|
||
events,
|
||
title,
|
||
showViewAll = false,
|
||
variant = 'grid',
|
||
}: EventsTimelineProps) {
|
||
if (events.length === 0) {
|
||
return (
|
||
<section className="py-12">
|
||
<div className="text-center py-16 border-4 border-dashed border-[var(--color-border)]">
|
||
<p className="font-pixel text-[var(--color-text-muted)] text-sm">
|
||
Событий пока нет
|
||
</p>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<section className="py-12">
|
||
{/* Header */}
|
||
{(title || showViewAll) && (
|
||
<div className="flex items-center justify-between mb-8">
|
||
{title && (
|
||
<GlitchText
|
||
as="h2"
|
||
intensity="subtle"
|
||
className="text-xl sm:text-2xl"
|
||
>
|
||
{title}
|
||
</GlitchText>
|
||
)}
|
||
{showViewAll && (
|
||
<Link href="/events">
|
||
<Button variant="ghost" size="sm">
|
||
Все события →
|
||
</Button>
|
||
</Link>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Featured variant - first event large, rest in grid */}
|
||
{variant === 'featured' && events.length > 0 && (
|
||
<div className="space-y-8">
|
||
<EventCard event={events[0]} variant="featured" />
|
||
{events.length > 1 && (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{events.slice(1).map((event) => (
|
||
<EventCard key={event._id} event={event} />
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Grid variant */}
|
||
{variant === 'grid' && (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||
{events.map((event) => (
|
||
<EventCard key={event._id} event={event} />
|
||
))}
|
||
</div>
|
||
)}
|
||
|
||
{/* List variant */}
|
||
{variant === 'list' && (
|
||
<div className="space-y-4">
|
||
{events.map((event) => (
|
||
<EventCard key={event._id} event={event} variant="compact" />
|
||
))}
|
||
</div>
|
||
)}
|
||
</section>
|
||
)
|
||
}
|