78 lines
No EOL
1.8 KiB
TypeScript
78 lines
No EOL
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { ImageCard } from '@/components/ImageCard/ImageCard'
|
|
import styles from "./styles.module.scss"
|
|
import { Arrow } from '@/components/Arrow/Arrow'
|
|
import { useEffect, useMemo, useState } from 'react'
|
|
import classNames from 'classnames'
|
|
|
|
export type Slide = {
|
|
id: string,
|
|
src: string,
|
|
title: string,
|
|
href: string,
|
|
}
|
|
|
|
type ImageCardSliderProps = {
|
|
slides: Slide[]
|
|
}
|
|
|
|
export const ImageCardSlider = ({slides}: ImageCardSliderProps) => {
|
|
|
|
const itemsPerPage = 3;
|
|
const [page, setPage] = useState(0)
|
|
const [prevDisabled, setPrevDisabled] = useState(true)
|
|
const [nextDisabled, setNextDisabled] = useState(true)
|
|
|
|
useEffect(() => {
|
|
if (page === 0) {
|
|
setPrevDisabled(true)
|
|
} else {
|
|
setPrevDisabled(false)
|
|
}
|
|
|
|
if ((page + 1) * itemsPerPage > slides.length) {
|
|
setNextDisabled(true)
|
|
} else {
|
|
setNextDisabled(false)
|
|
}
|
|
|
|
}, [slides, page, setNextDisabled, setPrevDisabled])
|
|
|
|
const pagedSlides = useMemo(() => {
|
|
return slides.slice(page * itemsPerPage, (page + 1) * itemsPerPage)
|
|
}, [slides, page])
|
|
|
|
return (
|
|
<div className={styles.wrapper}>
|
|
<div className={classNames({
|
|
[styles.arrowLeft]: true,
|
|
[styles.disabled]: prevDisabled,
|
|
})}>
|
|
<Arrow
|
|
direction={"left"}
|
|
onClick={() => setPage(page - 1)}
|
|
/>
|
|
</div>
|
|
<div className={styles.container}>
|
|
{
|
|
pagedSlides.map(slide =>
|
|
<div key={slide.id} className={styles.item}>
|
|
<ImageCard src={slide.src} title={slide.title} href={slide.href} />
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
<div className={classNames({
|
|
[styles.arrowRight]: true,
|
|
[styles.disabled]: nextDisabled,
|
|
})}>
|
|
<Arrow
|
|
direction={"right"}
|
|
onClick={() => setPage(page + 1)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
)
|
|
} |