feat: SW-276 Updated UI as per design

2024-10-14 08:50:55 +02:00
parent b8f7f91fb4
commit cefed89ae5
9 changed files with 97 additions and 100 deletions
--- a/components/GuestsRoomsPicker/Counter/counter.module.css
+++ b/components/GuestsRoomsPicker/Counter/counter.module.css
@@ -0,0 +1,13 @@
+.counterContainer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 20px;
+}
+.counterBtn {
+  width: 40px;
+  height: 40px;
+}
+.counterBtn:not([disabled]) {
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+}
--- a/components/GuestsRoomsPicker/Counter/index.tsx
+++ b/components/GuestsRoomsPicker/Counter/index.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import { MinusIcon, PlusIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+
+import styles from "./counter.module.css"
+
+import { CounterProps } from "@/types/components/bookingWidget/guestsRoomsPicker"
+
+export default function Counter({
+  count,
+  handleOnIncrease,
+  handleOnDecrease,
+  disableIncrease,
+  disableDecrease,
+}: CounterProps) {
+  return (
+    <div className={styles.counterContainer}>
+      <Button
+        className={styles.counterBtn}
+        intent="inverted"
+        onClick={handleOnDecrease}
+        size="small"
+        theme="base"
+        variant="icon"
+        wrapping={true}
+        disabled={disableDecrease}
+      >
+        <MinusIcon color="burgundy" />
+      </Button>
+      <Body color="textHighContrast" textAlign="center">
+        {count}
+      </Body>
+      <Button
+        className={styles.counterBtn}
+        onClick={handleOnIncrease}
+        intent="inverted"
+        variant="icon"
+        theme="base"
+        wrapping={true}
+        size="small"
+        disabled={disableIncrease}
+      >
+        <PlusIcon color="burgundy" />
+      </Button>
+    </div>
+  )
+}