All files / features/events/pages EventListPage.tsx

100% Statements 7/7
100% Branches 2/2
100% Functions 2/2
100% Lines 7/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49                1x 2x 2x   2x 1x             1x                                           2x            
import { Link } from 'react-router-dom'
import { Plus } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { Button } from '@core/components/ui/button'
import { EventCard } from '../components/EventCard'
import { useEvents } from '@features/events/hooks/useEvents'
import { PageLoader } from '@core/components/ui/page-loader'
 
export const EventListPage = () => {
    const { events, isLoading } = useEvents()
    const { t } = useTranslation('common')
 
    if (isLoading) {
        return (
            <div className="flex justify-center items-center h-64">
                <PageLoader />
            </div>
        )
    }
 
    return (
        <div className="space-y-6">
            <div className="flex justify-between items-center">
                <div>
                    <h1
                        className="text-3xl font-bold tracking-tight"
                        style={{ color: 'var(--admin-heading-color)' }}
                    >
                        {t('admin_events.title')}
                    </h1>
                    <p className="text-muted-foreground mt-1">{t('admin_events.subtitle')}</p>
                </div>
                <Button className="gap-2" asChild>
                    <Link to="/admin/events/new">
                        <Plus className="h-4 w-4" />
                        {t('admin_events.create')}
                    </Link>
                </Button>
            </div>
 
            <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
                {events.map((event) => (
                    <EventCard key={event.id} event={event} />
                ))}
            </div>
        </div>
    )
}