feat: update Background ids

mateusfg7 · Sep 5, 2022 · bc1f1e0 · bc1f1e0
1 parent c2816e1
commit bc1f1e0
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 23 deletions.
diff --git a/src/components/BackgroundMenu/index.tsx b/src/components/BackgroundMenu/index.tsx
@@ -30,13 +30,13 @@ export const BackgroundMenu = () => {
               {({ active }) => (
                 <button
                   className={`border-2 ${
-                    background === 'animated' && 'border-white'
+                    background === 'static' && 'border-white'
                   } ${
                     active ? 'border-white' : 'border-transparent'
-                  } font-bold text-xl p-10 md:p-6 rounded-2xl cursor-pointer animate-background-change-sm`}
-                  onClick={() => setBackground('animated')}
+                  } font-bold text-xl p-10 md:p-6 rounded-2xl cursor-pointer bg-main`}
+                  onClick={() => setBackground('static')}
                 >
-                  Animated
+                  Static
                 </button>
               )}
             </Menu.Item>
@@ -58,41 +58,55 @@ export const BackgroundMenu = () => {
               {({ active }) => (
                 <button
                   className={`border-2 ${
-                    background === 'lofi-rain' && 'border-white'
+                    background === 'transition' && 'border-white'
+                  } ${
+                    active ? 'border-white' : 'border-transparent'
+                  } font-bold text-xl p-10 md:p-6 rounded-2xl cursor-pointer animate-background-change-sm`}
+                  onClick={() => setBackground('transition')}
+                >
+                  Transition
+                </button>
+              )}
+            </Menu.Item>
+            <Menu.Item>
+              {({ active }) => (
+                <button
+                  className={`border-2 ${
+                    background === 'room-and-rain' && 'border-white'
                   } ${
                     active ? 'border-white' : 'border-transparent'
                   } font-bold text-xl p-10 md:p-6 rounded-2xl cursor-pointer bg-lofi-rain bg-center bg-cover`}
-                  onClick={() => setBackground('lofi-rain')}
+                  onClick={() => setBackground('room-and-rain')}
                 >
-                  LoFi Rain
+                  Room and Rain
                 </button>
               )}
             </Menu.Item>
             <Menu.Item>
               {({ active }) => (
                 <button
                   className={`border-2 ${
-                    background === 'train-rain' && 'border-white'
+                    background === 'train-and-rain' && 'border-white'
                   } ${
                     active ? 'border-white' : 'border-transparent'
                   } font-bold text-xl p-10 md:p-6 rounded-2xl cursor-pointer bg-train-rain bg-center bg-cover`}
-                  onClick={() => setBackground('train-rain')}
+                  onClick={() => setBackground('train-and-rain')}
                 >
-                  Train Rain
+                  Train and Rain
                 </button>
               )}
             </Menu.Item>
             <Menu.Item>
               {({ active }) => (
                 <button
                   className={`border-2 ${
-                    background === 'tree' && 'border-white'
+                    background === 'waterfall' && 'border-white'
                   } ${
                     active ? 'border-white' : 'border-transparent'
                   } font-bold text-xl p-10 md:p-6 rounded-2xl cursor-pointer bg-tree bg-center bg-cover`}
-                  onClick={() => setBackground('tree')}
+                  onClick={() => setBackground('waterfall')}
                 >
-                  Tree
+                  Waterfall
                 </button>
               )}
             </Menu.Item>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -14,20 +14,21 @@ const Home: React.FC = () => {
   return (
     <div
       className={`
-    ${background === 'animated' && 'animate-background-change'}
+    ${background === 'transition' && 'animate-background-change'}
     ${background === 'dark' && 'bg-gray-900'}
     ${
-      background === 'lofi-rain' &&
+      background === 'room-and-rain' &&
       'bg-lofi-rain bg-fixed bg-no-repeat bg-cover bg-center backdrop-brightness-50'
     }
     ${
-      background === 'train-rain' &&
+      background === 'train-and-rain' &&
       'bg-train-rain bg-fixed bg-no-repeat bg-cover bg-center backdrop-brightness-50'
     }
     ${
-      background === 'tree' &&
+      background === 'waterfall' &&
       'bg-tree bg-fixed bg-no-repeat bg-cover bg-center backdrop-brightness-50'
     }
+    ${background === 'static' && 'bg-main'}
     
     `}
     >

diff --git a/src/stores/BackgroundStore.ts b/src/stores/BackgroundStore.ts
@@ -1,19 +1,19 @@
 import create from 'zustand'
 
 type Background =
-  | 'animated'
+  | 'transition'
   | 'dark'
-  | 'lofi-rain'
-  | 'train-rain'
-  | 'tree'
-  | 'disabled'
+  | 'room-and-rain'
+  | 'train-and-rain'
+  | 'waterfall'
+  | 'static'
 
 interface BackgroundStore {
   background: Background
   setBackground: (newBackground: Background) => void
 }
 
 export const useBackgroundStore = create<BackgroundStore>(set => ({
-  background: 'disabled',
+  background: 'transition',
   setBackground: newBackground => set(() => ({ background: newBackground }))
 }))