From b7539f978cc64f4d6cca01975ffda8750d762268 Mon Sep 17 00:00:00 2001
From: BFlat <bombayapirat@gmail.com>
Date: Tue, 27 Feb 2024 18:39:39 +0700
Subject: [PATCH] added selection bubbles mobileSideScroll boolean prop

---
 .../SelectionBubbles/SelectionBubbles.scss    |  4 ++++
 .../SelectionBubbles/SelectionBubbles.tsx     | 19 ++++++++++++++-----
 .../LandingDemo/FakeYouLandingDemo.tsx        |  1 +
 3 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss
index 58baffbcc6..fd5dc67d58 100644
--- a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss
+++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.scss
@@ -79,6 +79,10 @@
     justify-content: start;
     overflow-x: visible;
   }
+
+  &.no-side-scroll {
+    flex-wrap: wrap;
+  }
 }
 
 .bubble-button {
diff --git a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
index 0d80aac545..3701a9782c 100644
--- a/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
+++ b/packages/fakeyou.com/src/components/common/SelectionBubbles/SelectionBubbles.tsx
@@ -10,12 +10,14 @@ interface SelectionBubbleProps {
   options: string[];
   onSelect: (selected: string) => void;
   selectedStyle?: "outline" | "fill";
+  mobileSideScroll?: boolean;
 }
 
 export default function SelectionBubbles({
   options,
   onSelect,
   selectedStyle = "outline",
+  mobileSideScroll = false,
 }: SelectionBubbleProps) {
   //Select first one as default on mount
   const [selectedOption, setSelectedOption] = useState<string | null>(
@@ -72,16 +74,23 @@ export default function SelectionBubbles({
   return (
     <div
       className={`selection-bubbles-wrapper ${
-        showGradient ? "show-gradient" : ""
-      } ${showLeftGradient ? "show-left-gradient" : ""}`.trim()}
+        showGradient && mobileSideScroll ? "show-gradient" : ""
+      } ${
+        showLeftGradient && mobileSideScroll ? "show-left-gradient" : ""
+      }`.trim()}
     >
-      {showLeftGradient && (
+      {showLeftGradient && mobileSideScroll && (
         <FontAwesomeIcon
           icon={faChevronLeft}
           className="scroll-indicator-left fs-5"
         />
       )}
-      <div className="selection-bubbles" ref={bubblesRef}>
+      <div
+        className={`selection-bubbles ${
+          !mobileSideScroll ? "no-side-scroll" : ""
+        }`.trim()}
+        ref={bubblesRef}
+      >
         {options.map(option => (
           <button
             key={option}
@@ -96,7 +105,7 @@ export default function SelectionBubbles({
           </button>
         ))}
       </div>
-      {showGradient && (
+      {showGradient && mobileSideScroll && (
         <FontAwesomeIcon
           icon={faChevronRight}
           className="scroll-indicator fs-5"
diff --git a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
index 6ee90cbdd2..2645bccf85 100644
--- a/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
+++ b/packages/fakeyou.com/src/v2/view/pages/landing/fakeyou/LandingDemo/FakeYouLandingDemo.tsx
@@ -228,6 +228,7 @@ export default function LandingDemo({
           <SelectionBubbles
             options={voiceOptions}
             onSelect={handleVoiceSelection}
+            mobileSideScroll={true}
           />
         </div>