feat(chevron): add toTop button

Author: dan-online

src/App.tsx

@@ -1,6 +1,7 @@
 import { useRoutes } from '@solidjs/router';
 import { Footer } from './components/layout/footer';
 import { Navigation } from './components/layout/navigation';
+import { Up } from './components/layout/up';
 import { routes } from './routes';
 
 export function App() {
@@ -10,9 +11,8 @@ export function App() {
     <div class='dark:bg-zinc-900 transition'>
       <div class='min-h-screen 2xl:container 2xl:mx-auto sm:py-6 sm:px-7 py-5 px-4'>
         <Navigation />
-
         <Routes />
-
+        <Up></Up>
         <Footer />
       </div>
     </div>

src/components/docs/Navigation.tsx

@@ -28,7 +28,7 @@ export const NavigationDocs = ({ params, onSetPackage, onChoosePackage, folders,
 
   return (
     <div
-      class='sm:w-72 sm:max-h-[75vh] sm:overflow-y-scroll will-change-transform'
+      class='sm:w-72 pb-10 will-change-transform'
     >
       <h1 class='text-primary font-bold text-xl font-ledger'>Documentation</h1>
 

src/components/layout/up.tsx

@@ -0,0 +1,28 @@
+import { FiChevronUp } from 'solid-icons/fi';
+import { createSignal } from 'solid-js';
+
+export const Up = () => {
+  const [scroll, setScroll] = createSignal(window.scrollY);
+
+  window.addEventListener(
+    'scroll',
+    () => {
+      setScroll(window.scrollY);
+    },
+    true
+  );
+
+  const toTheSky = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    history.pushState('', document.title, window.location.pathname + window.location.search);
+  };
+  const cl = 'fixed bottom-10 right-10 bg-primary rounded-full transition duration-500 transform';
+
+  return (
+    <div class={`${cl} ${scroll() > 100 ? 'translate-y-0' : 'translate-y-24'}`}>
+      <button class='p-3' onClick={toTheSky}>
+        <FiChevronUp size={24} class='text-white'></FiChevronUp>
+      </button>
+    </div>
+  );
+};

src/index.tsx

@@ -3,6 +3,7 @@ import { Router } from '@solidjs/router';
 import { render } from 'solid-js/web';
 import { App } from './App';
 import './assets/css/main.css';
+
 const Main = () => (
   <MetaProvider>
     <Title>JOSH | Home</Title>

src/pages/Home.tsx

@@ -89,7 +89,7 @@ await josh.set("foo", "bar");\n\`\`\``;
         <div class='sm:w-1/2 sm:px-8 mt-8 sm:mt-0'>
           <div
             innerHTML={md.render(code)}
-            class='bg-zinc-800 px-8 sm:px-0 text-white rounded-lg shadow-xl py-8 sm:px-10 text-sm sm:text-md xl:text-lg sm:py-10'
+            class='bg-zinc-800 overflow-x-scroll px-8 sm:px-0 text-white rounded-lg shadow-xl py-8 sm:px-10 text-sm sm:text-md xl:text-lg sm:py-10'
           ></div>
           <div></div>
         </div>

vite.config.ts

@@ -2,6 +2,7 @@ import mdx from '@mdx-js/rollup';
 import remarkGfm from 'remark-gfm';
 import { defineConfig } from 'vite';
 import solid from 'vite-plugin-solid';
+
 export default defineConfig({
   build: {
     target: 'ESNext',
@@ -16,7 +17,7 @@ export default defineConfig({
       }
     }
   },
-  plugins: [mdx({ jsxImportSource: 'solid-jsx', remarkPlugins: [remarkGfm] }), solid()],
+  plugins: [solid(), mdx({ jsxImportSource: 'solid-jsx', remarkPlugins: [remarkGfm] })],
   server: {
     strictPort: true
   }