Tweaks

suhanw · Jan 9, 2025 · 5d8c436 · 5d8c436
1 parent d2c37b2
commit 5d8c436
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 17 deletions.
diff --git a/components/app-loader/style.less b/components/app-loader/style.less
@@ -45,7 +45,7 @@
     height: 100%;
     width: 0;
     background: #81cd2e;
-    animation: prog 25s ease-out infinite;
+    animation: prog 30s ease-out infinite;
   }
 }
 

diff --git a/components/bottom-menu/index.js b/components/bottom-menu/index.js
@@ -1,4 +1,3 @@
-import { useEffect, useState } from "react";
 import cn from "classnames";
 import { useShowElementOnUpScroll } from "utils";
 

diff --git a/components/bottom-menu/style.less b/components/bottom-menu/style.less
@@ -9,6 +9,7 @@
   justify-content: center;
   align-items: center;
   background-color: #f9f9f9;
+  border-top: 1px solid #333;
   transform: translateY(100%);
   transition: transform 300ms ease-out;
 

diff --git a/components/bottom-pill/index.js b/components/bottom-pill/index.js
@@ -0,0 +1,20 @@
+import cn from "classnames";
+import { useShowElementOnUpScroll } from "utils";
+
+import style from "./style";
+
+function BottomPill({ children }) {
+  const { showElement } = useShowElementOnUpScroll();
+
+  return (
+    <nav
+      className={cn(style.bottomPill, {
+        [style.show]: showElement,
+      })}
+    >
+      {children}
+    </nav>
+  );
+}
+
+export default BottomPill;
diff --git a/components/bottom-pill/style.less b/components/bottom-pill/style.less
@@ -0,0 +1,17 @@
+.bottomPill {
+  z-index: 1;
+  position: fixed;
+  bottom: 24px;
+  left: 50%;
+  padding: 12px 24px;
+  background-color: #f9f9f9;
+  border-radius: 24px;
+  border: 1px solid #333;
+  transform: translate(-50%, 200%);
+  transition: transform 300ms ease-out;
+
+  &.show {
+    transform: translate(-50%, 0);
+    transition: transform 300ms ease-out;
+  }
+}
diff --git a/pages/auteur-preview/index.js b/pages/auteur-preview/index.js
@@ -1,7 +1,8 @@
 import { useEffect } from "react";
 import Head from "next/head";
 import style from "./style";
-import BottomMenu from "components/bottom-menu";
+import Layout from "components/layout";
+import BottomPill from "components/bottom-pill";
 
 export default () => {
   useEffect(() => {
@@ -13,7 +14,7 @@ export default () => {
   }, []);
 
   return (
-    <>
+    <Layout>
       <Head>
         <title>Auteur Preview</title>
       </Head>
@@ -121,12 +122,12 @@ export default () => {
           <img src="/images/auteur-responsive.gif" />
         </figure>
       </article>
-      <BottomMenu mobileOnly={false}>
+      <BottomPill>
         <a className={style.cta} href="/auteur">
           <span>Auteur</span>
           <img src="/icons/external-link.svg" />
         </a>
-      </BottomMenu>
-    </>
+      </BottomPill>
+    </Layout>
   );
 };
diff --git a/pages/mapmycruise-preview/index.js b/pages/mapmycruise-preview/index.js
@@ -1,10 +1,11 @@
 import Head from "next/head";
 import style from "./style";
-import BottomMenu from "components/bottom-menu";
+import BottomPill from "components/bottom-pill";
+import Layout from "components/layout";
 
 export default () => {
   return (
-    <>
+    <Layout>
       <Head>
         <title>MapMyCruise Preview</title>
       </Head>
@@ -106,12 +107,12 @@ export default () => {
           <img src="https://github.com/suhanw/map_my_cruise/raw/master/docs/README_gifs/notifications.gif" />
         </figure>
       </article>
-      <BottomMenu mobileOnly={false}>
+      <BottomPill>
         <a className={style.cta} href="/mapmycruise">
           <span>MapMyCruise</span>
           <img src="/icons/external-link.svg" />
         </a>
-      </BottomMenu>
-    </>
+      </BottomPill>
+    </Layout>
   );
 };
diff --git a/pages/tmnt-preview/index.js b/pages/tmnt-preview/index.js
@@ -1,10 +1,11 @@
 import Head from "next/head";
 import style from "./style";
-import BottomMenu from "components/bottom-menu";
+import BottomPill from "components/bottom-pill";
+import Layout from "components/layout";
 
 export default () => {
   return (
-    <>
+    <Layout>
       <Head>
         <title>TMNT React Preview</title>
       </Head>
@@ -103,12 +104,12 @@ export default () => {
           <img src="/images/tmnt-preview/turtle-attack.gif" />
         </figure>
       </article>
-      <BottomMenu mobileOnly={false}>
+      <BottomPill>
         <a className={style.cta} href="/tmnt">
           <span>TMNT React</span>
           <img src="/icons/external-link.svg" />
         </a>
-      </BottomMenu>
-    </>
+      </BottomPill>
+    </Layout>
   );
 };