add nprogress bar

This commit is contained in:
marco.scaruffi@ticketsms.it 2024-04-26 16:56:21 +02:00
parent b20e18283e
commit ab75c4caf5
4 changed files with 29 additions and 1 deletions

14
package-lock.json generated
View File

@ -15,6 +15,7 @@
"classnames": "^2.5.1",
"next": "14.2.2",
"next-intl": "^3.11.3",
"next-nprogress-bar": "^2.3.11",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.1.0",
@ -3642,6 +3643,14 @@
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/next-nprogress-bar": {
"version": "2.3.11",
"resolved": "https://registry.npmjs.org/next-nprogress-bar/-/next-nprogress-bar-2.3.11.tgz",
"integrity": "sha512-OjSvsQwgSWa2qBMYO478QreGG9Jt82tr4wTQptmiyzNqqjzHCyKZNkhANnzPrjuFAoelIvmruJuakODofSnvTQ==",
"dependencies": {
"nprogress": "^0.2.0"
}
},
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@ -3651,6 +3660,11 @@
"node": ">=0.10.0"
}
},
"node_modules/nprogress": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
"integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA=="
},
"node_modules/nth-check": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",

View File

@ -16,6 +16,7 @@
"classnames": "^2.5.1",
"next": "14.2.2",
"next-intl": "^3.11.3",
"next-nprogress-bar": "^2.3.11",
"react": "^18",
"react-dom": "^18",
"react-icons": "^5.1.0",

View File

@ -2,9 +2,14 @@
import React from 'react';
import { useAppSelector } from '@/store/store';
import Head from 'next/head';
import { AppProgressBar as ProgressBar } from 'next-nprogress-bar';
import { useAppSelector } from '@/store/store';
import { LAYOUT_COLORS_PINK, LAYOUT_COLORS_YELLOW } from '@/constants/colors';
import { Themes } from '@/meta/settings';
const Layout: React.FC<React.PropsWithChildren> = (props) => {
const { children } = props;
@ -20,6 +25,12 @@ const Layout: React.FC<React.PropsWithChildren> = (props) => {
</Head>
<body>
<main className="container">{children}</main>
<ProgressBar
height="4px"
color={theme == Themes.dark ? LAYOUT_COLORS_YELLOW : LAYOUT_COLORS_PINK }
options={{ showSpinner: false }}
shallowRouting
/>
</body>
</html>
);

2
src/constants/colors.ts Normal file
View File

@ -0,0 +1,2 @@
export const LAYOUT_COLORS_YELLOW = '#fdd835';
export const LAYOUT_COLORS_PINK = '#d81b60';