perf(assets): add camp-fire background thumb

mateusfg7 · Sep 6, 2022 · ed5cd21 · ed5cd21
1 parent 4f1a618
commit ed5cd21
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 2 deletions.
diff --git a/public/bg/camping-fire-thumb.png b/public/bg/camping-fire-thumb.png
diff --git a/public/bg/camping-fire.gif b/public/bg/camping-fire.gif
diff --git a/src/components/BackgroundMenu/index.tsx b/src/components/BackgroundMenu/index.tsx
@@ -39,7 +39,7 @@ export const BackgroundMenu = () => {
         leaveFrom="transform opacity-100 scale-100"
         leaveTo="transform opacity-0 scale-95"
       >
-        <Menu.Items className="max-h-[85vh] flex flex-col gap-2 overflow-y-auto snap snap-y snap-mandatory scroll-pt-2 last:border-red-600 absolute left-4 right-4 md:left-auto md:right-0 mt-2 p-2 origin-top-right rounded-2xl bg-white/20 backdrop-blur-md shadow-2xl focus:outline-none">
+        <Menu.Items className="max-h-[85vh] flex flex-col gap-2 overflow-y-auto snap snap-y snap-mandatory scroll-pt-2 last:border-red-600 absolute left-4 right-4 md:left-auto md:right-0 mt-2 p-2 origin-top-right rounded-2xl bg-white/50 backdrop-blur-md shadow-2xl focus:outline-none">
           <Menu.Item as="div" className="snap-start md:w-52">
             {({ active }) => (
               <button
@@ -138,6 +138,22 @@ export const BackgroundMenu = () => {
               </button>
             )}
           </Menu.Item>
+          <Menu.Item as="div" className="snap-start md:w-52">
+            {({ active }) => (
+              <button
+                className={`border-2 ${
+                  background !== 'waterfall' && !active && 'border-transparent'
+                } ${
+                  background === 'waterfall' && !active && 'border-white/50'
+                } ${
+                  active && 'border-white'
+                } font-bold text-xl p-10 md:p-6 w-full rounded-2xl cursor-pointer bg-camping-fire-thumb bg-center bg-cover`}
+                onClick={() => handleBackground('camping-fire')}
+              >
+                Camping Fire
+              </button>
+            )}
+          </Menu.Item>
         </Menu.Items>
       </Transition>
     </Menu>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -29,6 +29,10 @@ const Home: React.FC = () => {
       'bg-tree bg-fixed bg-no-repeat bg-cover bg-center backdrop-brightness-50'
     }
     ${background === 'static' && 'bg-main'}
+    ${
+      background === 'camping-fire' &&
+      'bg-camping-fire bg-fixed bg-no-repeat bg-cover bg-center backdrop-brightness-50'
+    }
     
     `}
     >

diff --git a/src/stores/BackgroundStore.ts b/src/stores/BackgroundStore.ts
@@ -7,6 +7,7 @@ export type Background =
   | 'train-and-rain'
   | 'waterfall'
   | 'static'
+  | 'camping-fire'
 
 interface BackgroundStore {
   background: Background

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -24,7 +24,9 @@ module.exports = {
         'train-rain': 'url("/bg/train-rain.gif")',
         'train-rain-thumb': 'url("/bg/train-rain-thumb.png")',
         tree: 'url("/bg/tree.gif")',
-        'tree-thumb': 'url("/bg/tree-thumb.png")'
+        'tree-thumb': 'url("/bg/tree-thumb.png")',
+        'camping-fire': 'url("/bg/camping-fire.gif")',
+        'camping-fire-thumb': 'url("/bg/camping-fire-thumb.png")'
       },
       animation: {
         'background-change': 'background-change 300s 0s infinite',