From c8a13449b847c7e3b57ca2dfe672a4b47ba5c5c2 Mon Sep 17 00:00:00 2001 From: grinikita Date: Sat, 16 Nov 2024 13:28:47 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?= =?UTF-8?q?=D0=BD=20=D1=80=D0=BE=D1=83=D1=82=D0=B5=D1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- bro.config.js | 4 +- package-lock.json | 46 ++++++++++++++++++- package.json | 3 +- src/app.tsx | 11 +---- src/container/detail/index.tsx | 7 +++ src/container/list/index.tsx | 7 +++ .../main/components/layout/header.tsx | 32 +++++++++++++ .../main/components/layout/index.tsx | 16 +++++++ src/container/main/index.tsx | 9 ++++ src/container/main/router.tsx | 23 ++++++++++ 10 files changed, 145 insertions(+), 13 deletions(-) create mode 100644 src/container/detail/index.tsx create mode 100644 src/container/list/index.tsx create mode 100644 src/container/main/components/layout/header.tsx create mode 100644 src/container/main/components/layout/index.tsx create mode 100644 src/container/main/index.tsx create mode 100644 src/container/main/router.tsx diff --git a/bro.config.js b/bro.config.js index 5b671f4..4f8b651 100644 --- a/bro.config.js +++ b/bro.config.js @@ -1,3 +1,4 @@ +// eslint-disable-next-line @typescript-eslint/no-require-imports const pkg = require('./package'); module.exports = { @@ -9,7 +10,8 @@ module.exports = { }, /* use https://admin.bro-js.ru/ to create config, navigations and features */ navigations: { - 'kfu-24-teacher.main': '/kfu-24-teacher' + 'kfu-24-teacher.main': '/kfu-24-teacher', + 'kfu-24-teacher.detail': '/kfu-24-teacher/detail' }, features: { 'kfu-24-teacher': { diff --git a/package-lock.json b/package-lock.json index f8c787d..a938b63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,11 @@ "version": "0.0.0", "license": "ISC", "dependencies": { - "@brojs/cli": "^1.0.0", + "@brojs/cli": "^1.6.1", "express": "^4.19.2", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^6.28.0" }, "devDependencies": { "@eslint/js": "^9.14.0", @@ -2253,6 +2254,15 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/@remix-run/router": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.21.0.tgz", + "integrity": "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA==", + "license": "MIT", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@types/eslint": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz", @@ -7988,6 +7998,38 @@ "dev": true, "license": "MIT" }, + "node_modules/react-router": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz", + "integrity": "sha512-HrYdIFqdrnhDw0PqG/AKjAqEqM7AvxCz0DQ4h2W8k6nqmc5uRBYDag0SBxx9iYz5G8gnuNVLzUe13wl9eAsXXg==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.21.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.28.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.28.0.tgz", + "integrity": "sha512-kQ7Unsl5YdyOltsPGl31zOjLrDv+m2VcIEcIHqYYD3Lp0UppLjrzcfJqDJwXxFw3TH/yvapbnUvPlAj7Kx5nbg==", + "license": "MIT", + "dependencies": { + "@remix-run/router": "1.21.0", + "react-router": "6.28.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", diff --git a/package.json b/package.json index 71fd30e..92a4384 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,8 @@ "@brojs/cli": "^1.6.1", "express": "^4.19.2", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^6.28.0" }, "devDependencies": { "@eslint/js": "^9.14.0", diff --git a/src/app.tsx b/src/app.tsx index e501006..66b4b88 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,15 +1,8 @@ import React from 'react'; +import Main from './container/main'; const App = () => { - return ( -

- Hello world для проекта - kfu-24-teacher asd as das das d as{' '} -
- {' '} - asda s 123 -
-

- ); + return
; }; export default App; diff --git a/src/container/detail/index.tsx b/src/container/detail/index.tsx new file mode 100644 index 0000000..b60b644 --- /dev/null +++ b/src/container/detail/index.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const DetailPage = (): React.ReactElement => { + return

Detail Page

; +}; + +export default DetailPage; diff --git a/src/container/list/index.tsx b/src/container/list/index.tsx new file mode 100644 index 0000000..fcf57ac --- /dev/null +++ b/src/container/list/index.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const ListPage = (): React.ReactElement => { + return

List Page

; +}; + +export default ListPage; diff --git a/src/container/main/components/layout/header.tsx b/src/container/main/components/layout/header.tsx new file mode 100644 index 0000000..72e6e53 --- /dev/null +++ b/src/container/main/components/layout/header.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import { getNavigationsValue } from '@brojs/cli'; + +const navigations: Array<{ name: string; href: string }> = [ + { + name: 'Главная', + href: getNavigationsValue('kfu-24-teacher.main') + }, + { + name: 'Детальная информация', + href: getNavigationsValue('kfu-24-teacher.detail') + } +]; + +const Header = (): React.ReactElement => { + return ( +
+
    + {navigations.map((item) => { + return ( +
  • + {item.name} +
    • + ); + })} +
+
+ ); +}; + +export default Header; diff --git a/src/container/main/components/layout/index.tsx b/src/container/main/components/layout/index.tsx new file mode 100644 index 0000000..93cb1e9 --- /dev/null +++ b/src/container/main/components/layout/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { Outlet } from 'react-router-dom'; +import Header from './header'; + +const Layout = (): React.ReactElement => { + return ( + <> +
+
+ +
+ + ); +}; + +export default Layout; diff --git a/src/container/main/index.tsx b/src/container/main/index.tsx new file mode 100644 index 0000000..aa376b7 --- /dev/null +++ b/src/container/main/index.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { RouterProvider } from 'react-router-dom'; +import { router } from './router'; + +const Main = (): React.ReactElement => { + return ; +}; + +export default Main; diff --git a/src/container/main/router.tsx b/src/container/main/router.tsx new file mode 100644 index 0000000..6b83e21 --- /dev/null +++ b/src/container/main/router.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { createBrowserRouter } from 'react-router-dom'; +import ListPage from '../list'; +import DetailPage from '../detail'; +import { getNavigationsValue } from '@brojs/cli'; +import Layout from './components/layout'; + +export const router = createBrowserRouter([ + { + path: getNavigationsValue('kfu-24-teacher.main'), + element: , + children: [ + { + path: getNavigationsValue('kfu-24-teacher.main'), + element: + }, + { + path: getNavigationsValue('kfu-24-teacher.detail'), + element: + } + ] + } +]);