51 lines
1.2 KiB
TypeScript
51 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { cx } from "class-variance-authority"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { ArrowRightIcon } from "@/components/Icons"
|
|
|
|
import { useCarousel } from "./CarouselContext"
|
|
|
|
import styles from "./carousel.module.css"
|
|
|
|
import type { CarouselButtonProps } from "./types"
|
|
|
|
export function CarouselPrevious({ className, ...props }: CarouselButtonProps) {
|
|
const { scrollPrev, canScrollPrev } = useCarousel()
|
|
|
|
const intl = useIntl()
|
|
|
|
if (!canScrollPrev()) return null
|
|
|
|
return (
|
|
<button
|
|
className={cx(styles.button, styles.buttonPrev, className)}
|
|
onClick={scrollPrev}
|
|
aria-label={intl.formatMessage({ id: "Previous slide" })}
|
|
{...props}
|
|
>
|
|
<ArrowRightIcon color="burgundy" className={styles.prevIcon} />
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export function CarouselNext({ className, ...props }: CarouselButtonProps) {
|
|
const { scrollNext, canScrollNext } = useCarousel()
|
|
|
|
const intl = useIntl()
|
|
|
|
if (!canScrollNext()) return null
|
|
|
|
return (
|
|
<button
|
|
className={cx(styles.button, styles.buttonNext, className)}
|
|
onClick={scrollNext}
|
|
aria-label={intl.formatMessage({ id: "Next slide" })}
|
|
{...props}
|
|
>
|
|
<ArrowRightIcon color="burgundy" />
|
|
</button>
|
|
)
|
|
}
|