Add global horizontal loading bar (#208)

varianter · Oct 26, 2023 · e86dc0a · e86dc0a
1 parent 1f69867
commit e86dc0a
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 5 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -19,6 +19,7 @@
     "eslint-config-next": "^13.5.2",
     "next": "^13.5.2",
     "next-auth": "^4.23.2",
+    "nextjs-toploader": "^1.5.3",
     "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -1,4 +1,7 @@
 import Head from "next/head";
+
+import NextTopLoader from "nextjs-toploader";
+
 import "./globals.css";
 import NavBar from "@/components/NavBar/NavBar";
 
@@ -18,6 +21,7 @@ export default function RootLayout({
       </Head>
       <body>
         <NavBar />
+        <NextTopLoader color="#F076A6" height={3} initialPosition={0.2} />
         {children}
       </body>
     </html>

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -1,3 +1,4 @@
+import PrimaryButton from "@/components/PrimaryButton";
 import { fetchWithToken } from "@/data/fetchWithToken";
 import { Organisation } from "@/types";
 import Link from "next/link";
@@ -8,11 +9,8 @@ export default async function Root() {
     <ul className="h-screen flex items-center justify-center gap-4">
       {orgs.map((o) => (
         <li key={o.urlKey}>
-          <Link
-            className="body-bold text-primary_default border-2 rounded-xl p-4 border-primary_l1 hover:bg-primary_default hover:bg-opacity-10 hover:border-primary_default"
-            href={`/${o.urlKey}/bemanning`}
-          >
-            {o.name}
+          <Link href={`/${o.urlKey}/bemanning`}>
+            <PrimaryButton label={o.name} />
           </Link>
         </li>
       ))}

diff --git a/frontend/src/components/PrimaryButton.tsx b/frontend/src/components/PrimaryButton.tsx
@@ -0,0 +1,16 @@
+export default function PrimaryButton({
+  label,
+  onClick,
+}: {
+  label: string;
+  onClick?: () => void;
+}) {
+  return (
+    <button
+      className="h-10 p-3 bg-primary_default rounded-lg justify-center items-center gap-2 inline-flex"
+      onClick={onClick}
+    >
+      <div className="text-white text-sm leading-none">{label}</div>
+    </button>
+  );
+}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -221,6 +221,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.5.9.tgz#a70ec9d8fa0180a314c3ede0e20ea56ff71aed9a"
   integrity sha512-PcGNd//40kHAS3sTlzKB9C9XL4K0sTup8nbG5lC14kzEteTNuAFh9u5nA0o5TWnSG2r/JNPRXFVcHJIIeRlmqQ==
 
+"@types/nprogress@^0.2.1":
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/@types/nprogress/-/nprogress-0.2.2.tgz#c73bf540ac7926fb1b6d03f9d2725e07b3848d65"
+  integrity sha512-2wLrSJXLztGmr7wXwM0hA/wuIOY9DznVdd+ZFofHOiXcj9JnVt+2ZeLRJ7v5ZVlmheSkUOSg3Q3O4Ce7yji79A==
+
 "@types/prop-types@*":
   version "15.7.6"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.6.tgz#bbf819813d6be21011b8f5801058498bec555572"
@@ -1804,6 +1809,15 @@ next@^13.5.2:
     "@next/swc-win32-ia32-msvc" "13.5.2"
     "@next/swc-win32-x64-msvc" "13.5.2"
 
+nextjs-toploader@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/nextjs-toploader/-/nextjs-toploader-1.5.3.tgz#a841c858066006259d16a4258db8328e92ef66d6"
+  integrity sha512-kNqgpOxVeo7ihMZqNzxtsCNcO0lo1NNjxhCtnJ2qgTKxgppMGpuSVU4FTMaCOefamVop1mWk1Ij3C2pBP5NwPg==
+  dependencies:
+    "@types/nprogress" "^0.2.1"
+    nprogress "^0.2.0"
+    prop-types "^15.8.1"
+
 node-releases@^2.0.13:
   version "2.0.13"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d"
@@ -1819,6 +1833,11 @@ normalize-range@^0.1.2:
   resolved "https://registry.yarnpkg.com/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
+nprogress@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/nprogress/-/nprogress-0.2.0.tgz#cb8f34c53213d895723fcbab907e9422adbcafb1"
+  integrity sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==
+
 oauth@^0.9.15:
   version "0.9.15"
   resolved "https://registry.yarnpkg.com/oauth/-/oauth-0.9.15.tgz#bd1fefaf686c96b75475aed5196412ff60cfb9c1"