55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { cx } from "class-variance-authority"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
|
|
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({
|
|
defaultMessage: "Previous slide",
|
|
})}
|
|
{...props}
|
|
>
|
|
<MaterialIcon color="Icon/Interactive/Default" icon="arrow_back" />
|
|
</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({
|
|
defaultMessage: "Next slide",
|
|
})}
|
|
{...props}
|
|
>
|
|
<MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
|
|
</button>
|
|
)
|
|
}
|