v0.1/new-features #43
|
@ -15,6 +15,7 @@
|
||||||
"classnames": "^2.5.1",
|
"classnames": "^2.5.1",
|
||||||
"next": "14.2.2",
|
"next": "14.2.2",
|
||||||
"next-intl": "^3.11.3",
|
"next-intl": "^3.11.3",
|
||||||
|
"next-nprogress-bar": "^2.3.11",
|
||||||
"react": "^18",
|
"react": "^18",
|
||||||
"react-dom": "^18",
|
"react-dom": "^18",
|
||||||
"react-icons": "^5.1.0",
|
"react-icons": "^5.1.0",
|
||||||
|
@ -3642,6 +3643,14 @@
|
||||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
"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": {
|
"node_modules/normalize-path": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
|
||||||
|
@ -3651,6 +3660,11 @@
|
||||||
"node": ">=0.10.0"
|
"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": {
|
"node_modules/nth-check": {
|
||||||
"version": "2.1.1",
|
"version": "2.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
|
||||||
|
|
|
@ -16,6 +16,7 @@
|
||||||
"classnames": "^2.5.1",
|
"classnames": "^2.5.1",
|
||||||
"next": "14.2.2",
|
"next": "14.2.2",
|
||||||
"next-intl": "^3.11.3",
|
"next-intl": "^3.11.3",
|
||||||
|
"next-nprogress-bar": "^2.3.11",
|
||||||
"react": "^18",
|
"react": "^18",
|
||||||
"react-dom": "^18",
|
"react-dom": "^18",
|
||||||
"react-icons": "^5.1.0",
|
"react-icons": "^5.1.0",
|
||||||
|
|
|
@ -2,9 +2,14 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { useAppSelector } from '@/store/store';
|
|
||||||
import Head from 'next/head';
|
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 Layout: React.FC<React.PropsWithChildren> = (props) => {
|
||||||
|
|
||||||
const { children } = props;
|
const { children } = props;
|
||||||
|
@ -20,6 +25,12 @@ const Layout: React.FC<React.PropsWithChildren> = (props) => {
|
||||||
</Head>
|
</Head>
|
||||||
<body>
|
<body>
|
||||||
<main className="container">{children}</main>
|
<main className="container">{children}</main>
|
||||||
|
<ProgressBar
|
||||||
|
height="4px"
|
||||||
|
color={theme == Themes.dark ? LAYOUT_COLORS_YELLOW : LAYOUT_COLORS_PINK }
|
||||||
|
options={{ showSpinner: false }}
|
||||||
|
shallowRouting
|
||||||
|
/>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1,2 @@
|
||||||
|
export const LAYOUT_COLORS_YELLOW = '#fdd835';
|
||||||
|
export const LAYOUT_COLORS_PINK = '#d81b60';
|
Loading…
Reference in New Issue