You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
51 lines
1.0 KiB
51 lines
1.0 KiB
import map from 'lodash/map'
|
|
import isEmpty from 'lodash/isEmpty'
|
|
|
|
import type { Match } from 'features/Matches'
|
|
import { MatchCard } from 'features/MatchCard'
|
|
|
|
import { useMatchesSlider } from './hooks'
|
|
import {
|
|
Wrapper,
|
|
Arrow,
|
|
Slides,
|
|
} from './styled'
|
|
|
|
type MatchesSliderProps = {
|
|
matches: Array<Match>,
|
|
}
|
|
|
|
export const MatchesSlider = ({ matches }: MatchesSliderProps) => {
|
|
const {
|
|
onScroll,
|
|
showLeftArrow,
|
|
showRightArrow,
|
|
slideLeft,
|
|
slideRight,
|
|
slidesRef,
|
|
} = useMatchesSlider(matches)
|
|
|
|
if (isEmpty(matches)) return null
|
|
|
|
return (
|
|
<Wrapper>
|
|
{showLeftArrow && (
|
|
<Arrow
|
|
type='arrowLeft'
|
|
aria-label='Slide left'
|
|
onClick={slideLeft}
|
|
/>
|
|
)}
|
|
<Slides ref={slidesRef} onScroll={onScroll}>
|
|
{map(matches, (match) => <MatchCard match={match} key={match.id} />)}
|
|
</Slides>
|
|
{showRightArrow && (
|
|
<Arrow
|
|
type='arrowRight'
|
|
aria-label='Slide right'
|
|
onClick={slideRight}
|
|
/>
|
|
)}
|
|
</Wrapper>
|
|
)
|
|
}
|
|
|