64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import * as React from "react"
|
|
|
|
import type { Query } from "../types/Query"
|
|
|
|
import { CaptionImage } from "../components/CaptionImage"
|
|
import { Container } from "../components/Container"
|
|
import { FadeIn, FadeInStagger } from "../components/FadeIn"
|
|
import { FallbackMessage } from "../components/FallbackMessage"
|
|
import { FilterScroll } from "../components/FilterScroll"
|
|
import { Loading } from "../components/Loading"
|
|
|
|
const FIDE_RATING_MIN = 1500
|
|
const FIDE_RATING_MAX = 3200
|
|
|
|
interface Coach {
|
|
id: string
|
|
imageUrl: string
|
|
name: string
|
|
title: string
|
|
slug: string
|
|
}
|
|
|
|
const defaultQuery: Query = {
|
|
fideRating: [FIDE_RATING_MIN, FIDE_RATING_MAX],
|
|
}
|
|
|
|
export function Search() {
|
|
const [query, setQuery] = React.useState<Query>(defaultQuery)
|
|
const [loading, setLoading] = React.useState(true)
|
|
const [coaches, setCoaches] = React.useState<Coach[]>([])
|
|
|
|
return (
|
|
<Container className="pt-8">
|
|
<FilterScroll query={query} onEnable={setQuery} onModal={() => {}} />
|
|
<Loading
|
|
className={loading || coaches.length === 0 ? "mt-40" : "mt-10"}
|
|
loading={loading}
|
|
>
|
|
{coaches.length > 0 ? (
|
|
<FadeInStagger
|
|
className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"
|
|
faster
|
|
>
|
|
{coaches.map((coach, index) => (
|
|
<FadeIn key={index} className="flex cursor-pointer flex-col">
|
|
<CaptionImage
|
|
title={coach.name}
|
|
subtitle={coach.title || undefined}
|
|
src={coach.imageUrl}
|
|
/>
|
|
</FadeIn>
|
|
))}
|
|
</FadeInStagger>
|
|
) : (
|
|
<FallbackMessage
|
|
title="Coming Soon"
|
|
body="Full search functionality will be added soon! Please come back later."
|
|
/>
|
|
)}
|
|
</Loading>
|
|
</Container>
|
|
)
|
|
}
|