feat: SW-276 Implemented Guests and rooms picker

components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/adult-selector.module.css

@@ -0,0 +1,9 @@
+.container {
+  display: grid;
+  grid-template-columns: auto auto auto auto;
+  align-items: center;
+}
+
+.textCenter {
+  text-align: center;
+}

components/GuestsRoomsPicker/GuestsRoomPicker/AdultSelector/index.tsx

@@ -0,0 +1,44 @@
+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>
+  )
+}