45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { useIntl } from "react-intl"
|
|
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import styles from "./adult-selector.module.css"
|
|
|
|
import { AdultSelectorProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
|
|
|
|
export default function AdultSelector({
|
|
adults = 1,
|
|
updateAdults = (count: number) => {},
|
|
}: AdultSelectorProps) {
|
|
const intl = useIntl()
|
|
const adultsLabel = intl.formatMessage({ id: "Adults" })
|
|
|
|
function decreaseAdults() {
|
|
if (adults <= 1) {
|
|
return
|
|
}
|
|
adults = adults - 1
|
|
updateAdults(adults)
|
|
}
|
|
function increaseAdults() {
|
|
if (adults > 5) {
|
|
return
|
|
}
|
|
adults = adults + 1
|
|
updateAdults(adults)
|
|
}
|
|
|
|
return (
|
|
<section className={styles.container}>
|
|
<Caption>{adultsLabel}</Caption>
|
|
<Button onClick={decreaseAdults} intent="text" size="small">
|
|
-
|
|
</Button>
|
|
<span className={styles.textCenter}>{adults}</span>
|
|
<Button onClick={increaseAdults} intent="text" size="small">
|
|
+
|
|
</Button>
|
|
</section>
|
|
)
|
|
}
|