refactor: select size effect

isd-sgcu · Jul 12, 2023 · 64a8045 · 64a8045
1 parent 6284cbb
commit 64a8045
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 14 deletions.
diff --git a/src/pages/baan-choosing.tsx b/src/pages/baan-choosing.tsx
@@ -33,6 +33,12 @@ const testBaanData: TestBaanObj[] = [
 const BaanChoosing = () => {
     const [input, setInput] = useState<string>('');
     const [fill, setFill] = useState<string>('');
+    const [toggleColor, setToggleColor] = useState<string[]>([
+        'unClickedSizeButton',
+        'unClickedSizeButton',
+        'unClickedSizeButton',
+        'unClickedSizeButton',
+    ]);
     const [baan, setBaan] = useState<TestBaanObj[]>(testBaanData);
     interface SelectedBaan {
         imageURL: string;
@@ -136,12 +142,28 @@ const BaanChoosing = () => {
                 </div>
             );
         });
-    const filterBaan = (f: string) => {
+    const filterBaan = (f: string, n: number) => {
         setBaan(testBaanData);
-        if (fill == f) setFill('');
-        else {
+        if (fill == f) {
+            setFill('');
+            setToggleColor([
+                'unClickedSizeButton',
+                'unClickedSizeButton',
+                'unClickedSizeButton',
+                'unClickedSizeButton',
+            ]);
+        } else {
             setFill(f);
             setBaan(testBaanData.filter((e: TestBaanObj) => e.size == f));
+            const toToggle: string[] = [
+                'unClickedSizeButton',
+                'unClickedSizeButton',
+                'unClickedSizeButton',
+                'unClickedSizeButton',
+            ];
+            toToggle[n] =
+                'bg-red-500 ring-pink-200/30 transition-all duration-300';
+            setToggleColor(toToggle);
         }
     };
     return (
@@ -199,28 +221,26 @@ const BaanChoosing = () => {
                     </div>
                     <div className="mt-8 flex px-2 py-2 max-lg:overflow-scroll lg:px-4 lg:py-4">
                         <button
-                            className="selectSizeButton max-lg:whitespace-nowrap"
-                            onClick={() => filterBaan('S')}
+                            className={`${toggleColor[0]} selectSizeButton max-lg:whitespace-nowrap`}
+                            onClick={() => filterBaan('S', 0)}
                         >
                             บ้านขนาดเล็ก (S)
                         </button>
                         <button
-                            className="selectSizeButton max-lg:whitespace-nowrap"
-                            onClick={() => filterBaan('M')}
+                            className={`${toggleColor[1]} selectSizeButton max-lg:whitespace-nowrap`}
+                            onClick={() => filterBaan('M', 1)}
                         >
                             บ้านขนาดกลาง (M)
                         </button>
-
                         <button
-                            className="selectSizeButton max-lg:whitespace-nowrap"
-                            onClick={() => filterBaan('L')}
+                            className={`${toggleColor[2]} selectSizeButton max-lg:whitespace-nowrap`}
+                            onClick={() => filterBaan('L', 2)}
                         >
                             บ้านขนาดใหญ่ (L)
                         </button>
-
                         <button
-                            className="selectSizeButton max-lg:whitespace-nowrap"
-                            onClick={() => filterBaan('XL')}
+                            className={`${toggleColor[3]} selectSizeButton max-lg:whitespace-nowrap`}
+                            onClick={() => filterBaan('XL', 3)}
                         >
                             บ้านขนาดใหญ่พิเศษ (XL)
                         </button>

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -7,6 +7,9 @@
         @apply mb-4 w-full rounded-full border-gray-100 bg-gray-100 p-2 px-3;
     }
     .selectSizeButton {
-        @apply bg-pink-400 w-fit lg:px-4 px-2 mr-6 lg:py-2 py-1 rounded-lg lg:text-sm text-xs ring-8 ring-pink-400/30;
+        @apply mr-6 w-fit rounded-lg px-2 py-1 text-xs ring-8 lg:px-4 lg:py-2 lg:text-sm;
+    }
+    .unClickedSizeButton {
+        @apply bg-pink-400 ring-pink-400/30 transition-all duration-300;
     }
 }