5de2a993a7
Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons. Approved-by: Michael Zetterberg Approved-by: Erik Tiekstra
51 lines
1.3 KiB
TypeScript
51 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"
|
|
|
|
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}
|
|
>
|
|
<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({ id: "Next slide" })}
|
|
{...props}
|
|
>
|
|
<MaterialIcon color="Icon/Interactive/Default" icon="arrow_forward" />
|
|
</button>
|
|
)
|
|
}
|