60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import { cx } from "class-variance-authority"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { IconButton } from "@scandic-hotels/design-system/IconButton"
|
|
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 }: CarouselButtonProps) {
|
|
const { scrollPrev, canScrollPrev } = useCarousel()
|
|
|
|
const intl = useIntl()
|
|
|
|
if (!canScrollPrev()) return null
|
|
|
|
return (
|
|
<span className={cx(styles.buttonWrapper, styles.previous, className)}>
|
|
<IconButton
|
|
theme="Inverted"
|
|
style="Elevated"
|
|
onPress={scrollPrev}
|
|
aria-label={intl.formatMessage({
|
|
defaultMessage: "Previous slide",
|
|
})}
|
|
>
|
|
<MaterialIcon color="Icon/Interactive/Default" icon="arrow_back" />
|
|
</IconButton>
|
|
</span>
|
|
)
|
|
}
|
|
|
|
export function CarouselNext({ className }: CarouselButtonProps) {
|
|
const { scrollNext, canScrollNext } = useCarousel()
|
|
|
|
const intl = useIntl()
|
|
|
|
if (!canScrollNext()) return null
|
|
|
|
return (
|
|
<span className={cx(styles.buttonWrapper, styles.next, className)}>
|
|
<IconButton
|
|
theme="Inverted"
|
|
style="Elevated"
|
|
onPress={scrollNext}
|
|
aria-label={intl.formatMessage({
|
|
defaultMessage: "Next slide",
|
|
})}
|
|
>
|
|
<MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
|
|
</IconButton>
|
|
</span>
|
|
)
|
|
}
|