chore: seminarhof customer project
This commit is contained in:
113
apps/app/src/pages/events.tsx
Normal file
113
apps/app/src/pages/events.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
import { createFileRoute } from '@tanstack/react-router'
|
||||
import { useState } from 'react'
|
||||
import { m } from '@/i18n/messages'
|
||||
import { useLocale } from '@/i18n/config'
|
||||
import { asI18n } from '@pikku/react'
|
||||
import {
|
||||
Badge,
|
||||
Container,
|
||||
Group,
|
||||
Paper,
|
||||
Stack,
|
||||
Text,
|
||||
TextInput,
|
||||
} from '@pikku/mantine/core'
|
||||
import { usePikkuQuery } from '@project/functions-sdk/pikku/api.gen'
|
||||
import { MarketingShell } from '../components/MarketingShell'
|
||||
import { EventCard } from '../components/EventCard'
|
||||
import { PageTitle } from '../components/AppLayout'
|
||||
|
||||
type Filter = 'this_year' | 'next_year' | 'all'
|
||||
|
||||
function FilterChip({
|
||||
active,
|
||||
children,
|
||||
onClick,
|
||||
}: {
|
||||
active: boolean
|
||||
children: React.ReactNode
|
||||
onClick: () => void
|
||||
}) {
|
||||
return (
|
||||
<Badge
|
||||
variant={active ? 'filled' : 'light'}
|
||||
color={active ? 'plum' : 'gray'}
|
||||
style={{ cursor: 'pointer', textTransform: 'none' }}
|
||||
onClick={onClick}
|
||||
>
|
||||
{asI18n(`${children}`)}
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
function EventsPage() {
|
||||
useLocale()
|
||||
const [filter, setFilter] = useState<Filter>('all')
|
||||
const [search, setSearch] = useState('')
|
||||
|
||||
const { data, isLoading, error } = usePikkuQuery('getEventsListing', {
|
||||
venueSlug: 'drawehn',
|
||||
filter,
|
||||
search: search.trim() || undefined,
|
||||
})
|
||||
|
||||
if (isLoading) return <MarketingShell><Container py="xl"><Text>{m.common_states_loading()}</Text></Container></MarketingShell>
|
||||
if (error) return <MarketingShell><Container py="xl"><Text c="red">{m.common_states_error()}</Text></Container></MarketingShell>
|
||||
if (!data) return null
|
||||
|
||||
return (
|
||||
<MarketingShell>
|
||||
<Container size="lg" py="xl">
|
||||
<Stack gap="lg">
|
||||
<PageTitle title={m.common_pages_events_title()} />
|
||||
<Paper withBorder radius="md" p="md">
|
||||
<Stack gap="md">
|
||||
<TextInput
|
||||
placeholder={m.common_pages_events_search_placeholder()}
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.currentTarget.value)}
|
||||
/>
|
||||
<Group gap="xs">
|
||||
<FilterChip active={filter === 'this_year'} onClick={() => setFilter('this_year')}>
|
||||
{m.common_pages_events_filters_this_year()}
|
||||
</FilterChip>
|
||||
<FilterChip active={filter === 'next_year'} onClick={() => setFilter('next_year')}>
|
||||
{m.common_pages_events_filters_next_year()}
|
||||
</FilterChip>
|
||||
<FilterChip active={filter === 'all'} onClick={() => setFilter('all')}>
|
||||
{m.common_pages_events_filters_all()}
|
||||
</FilterChip>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{data.events.length === 0 ? (
|
||||
<Paper withBorder radius="md" p="xl">
|
||||
<Text size="sm" c="dimmed" ta="center">{m.common_pages_events_empty()}</Text>
|
||||
</Paper>
|
||||
) : (
|
||||
<Stack gap="md">
|
||||
{data.events.map((e) => (
|
||||
<EventCard
|
||||
key={e.bookingId}
|
||||
eventName={e.eventName}
|
||||
startDate={e.startDate}
|
||||
endDate={e.endDate}
|
||||
clientName={e.clientName}
|
||||
coverImageUrl={e.coverImageUrl}
|
||||
eventOutline={e.eventOutline}
|
||||
description={e.description}
|
||||
organiserWebsite={e.organiserWebsite}
|
||||
/>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
</Stack>
|
||||
</Container>
|
||||
</MarketingShell>
|
||||
)
|
||||
}
|
||||
|
||||
export const Route = createFileRoute('/events')({
|
||||
component: EventsPage,
|
||||
})
|
||||
Reference in New Issue
Block a user