diff --git a/ijl.config.js b/ijl.config.js
index 497c2fd..aab2a2a 100644
--- a/ijl.config.js
+++ b/ijl.config.js
@@ -1,22 +1,24 @@
-const pkg = require('./package')
+const pkg = require("./package");
module.exports = {
- apiPath: 'stubs/api',
+ apiPath: "stubs/api",
webpackConfig: {
output: {
- publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`
- }
+ publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
+ },
},
/* use https://kc.admin.inno-js.ru/ to create config, navigations and features */
navigations: {
- 'r-and-m.main': '/r-and-m'
+ "r-and-m.main": "/r-and-m",
+ "r-and-m.search": "/search",
+ "r-and-m.character.detail": "/char/:charId"
},
features: {
- 'r-and-m': {
+ "r-and-m": {
// add your features here in the format [featureName]: { value: string }
},
},
config: {
- key: 'value'
- }
-}
+ key: "value",
+ },
+};
diff --git a/package-lock.json b/package-lock.json
index ae1bb19..bc5dd3b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "r-and-m",
- "version": "1.0.0",
+ "version": "0.0.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "r-and-m",
- "version": "1.0.0",
+ "version": "0.0.0",
"license": "ISC",
"dependencies": {
"@emotion/react": "^11.11.4",
@@ -17,6 +17,7 @@
"express": "^4.19.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-router-dom": "^6.23.0",
"typescript": "^5.4.4"
}
},
@@ -2222,6 +2223,14 @@
"node": ">= 8"
}
},
+ "node_modules/@remix-run/router": {
+ "version": "1.16.0",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
+ "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
"node_modules/@socket.io/component-emitter": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz",
@@ -6549,6 +6558,36 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
+ "node_modules/react-router": {
+ "version": "6.23.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
+ "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
+ "dependencies": {
+ "@remix-run/router": "1.16.0"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.23.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
+ "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
+ "dependencies": {
+ "@remix-run/router": "1.16.0",
+ "react-router": "6.23.0"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/rechoir": {
"version": "0.8.0",
"resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.8.0.tgz",
diff --git a/package.json b/package.json
index 6a513e6..82f70bd 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"express": "^4.19.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-router-dom": "^6.23.0",
"typescript": "^5.4.4"
}
}
diff --git a/src/__data__/urls.ts b/src/__data__/urls.ts
new file mode 100644
index 0000000..fd1292c
--- /dev/null
+++ b/src/__data__/urls.ts
@@ -0,0 +1,17 @@
+import { getNavigationsValue } from '@ijl/cli';
+import { generatePath } from 'react-router-dom';
+
+const baseUrl = getNavigationsValue('r-and-m.main');
+
+export const URLs = {
+ baseUrl,
+ ui: {
+ search: getNavigationsValue('r-and-m.search') && `${baseUrl}${getNavigationsValue('r-and-m.search')}`,
+ charDetail: {
+ url: `${baseUrl}${getNavigationsValue('r-and-m.character.detail')}`,
+ on: Boolean(getNavigationsValue('r-and-m.character.detail')),
+ getUrl: (charId: number) => generatePath(`${baseUrl}${getNavigationsValue('r-and-m.character.detail')}`, { charId })
+ }
+ },
+ api: {},
+}
diff --git a/src/app.tsx b/src/app.tsx
index 4c1ce22..7181060 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,17 +1,16 @@
import React from "react";
import { Global } from "@emotion/react";
+import { BrowserRouter } from "react-router-dom";
-import { LandingPage } from "./pages/landing";
-import { SearchCharacterPage } from "./pages/search-character";
import { globalStyles } from "./global-styles";
+import { PageRoutes } from "./routes";
const App = () => {
return (
- <>
+
- {location.pathname === "/r-and-m" && }
- {location.pathname === "/r-and-m/search" && }
- >
+
+
);
};
diff --git a/src/components/link/link.styled.ts b/src/components/link/link.styled.ts
index 15ee24b..d8c877c 100644
--- a/src/components/link/link.styled.ts
+++ b/src/components/link/link.styled.ts
@@ -1,7 +1,9 @@
import styled from "@emotion/styled";
import { css } from "@emotion/react";
+import { Link as ConnectedLink } from 'react-router-dom';
-export const StyledLink = styled.a<{
+
+export const StyledLink = styled(ConnectedLink)<{
contrast?: boolean;
inheritColor?: boolean;
}>`
diff --git a/src/components/link/link.tsx b/src/components/link/link.tsx
index d011df6..44b118e 100644
--- a/src/components/link/link.tsx
+++ b/src/components/link/link.tsx
@@ -22,7 +22,7 @@ export const Link = (props: LinkProps) => {
}
return (
-
+
{props.children}
{isExternal && }
diff --git a/src/components/nav-panel/nav-panel.tsx b/src/components/nav-panel/nav-panel.tsx
index 4a0e11e..fd11bd6 100644
--- a/src/components/nav-panel/nav-panel.tsx
+++ b/src/components/nav-panel/nav-panel.tsx
@@ -1,30 +1,45 @@
import React from "react";
+// import { Link as ConnectedLink } from 'react-router-dom'
import { Link } from "../link";
import { Nav, NavList } from "./nav-panel.style";
+import { URLs } from "../../__data__/urls";
const navList = [
- { title: "Home", href: "#01" },
- { title: "Персонажи", href: "#02" },
+ { title: "Home", href: "/r-and-m" },
+ { title: "Персонажи", href: "/r-and-m/search" },
{ title: "Локации", href: "#03" },
{ title: "Эризоды", href: "#04" },
];
+const nav = {
+ home: { title: "Home", href: URLs.baseUrl },
+ search: { title: "Персонажи", href: URLs.ui.search },
+};
+
export function NavPanel({ currentNavElement }) {
return (
);
diff --git a/src/pages/landing.tsx b/src/pages/landing.tsx
index 68ff966..545b39f 100644
--- a/src/pages/landing.tsx
+++ b/src/pages/landing.tsx
@@ -9,6 +9,7 @@ import logo4x from "../assets/logo_4x.png";
import { Link } from "../components/link";
import { Card } from "../components/card";
import { Header1 } from "../components/common";
+
import {
BrandText,
Logo,
diff --git a/src/pages/search-character.tsx b/src/pages/search-character.tsx
index c14f5ee..e7a1755 100644
--- a/src/pages/search-character.tsx
+++ b/src/pages/search-character.tsx
@@ -1,4 +1,5 @@
import React from "react";
+import { Link as Connectedlink } from "react-router-dom";
import data from "../__stubs__/characters.json";
import logo from "../assets/logo_1x.png";
@@ -20,6 +21,7 @@ import {
} from "./style";
import { Header1 } from "../components/common";
import { InputField } from "../components/field/field";
+import { URLs } from "../__data__/urls";
export const SearchCharacterPage = () => {
return (
@@ -55,10 +57,12 @@ export const SearchCharacterPage = () => {
{data?.map((char) => (
-
-
- {char.name}
-
+
+
+
+ {char.name}
+
+
))}
diff --git a/src/routes.tsx b/src/routes.tsx
new file mode 100644
index 0000000..3344c5c
--- /dev/null
+++ b/src/routes.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Routes, Route } from'react-router-dom';
+
+import { URLs } from './__data__/urls';
+import { LandingPage } from './pages/landing';
+import { SearchCharacterPage } from './pages/search-character';
+
+export const PageRoutes = () => (
+
+ } />
+ } />
+ {URLs.ui.search && } />}
+
+ Page not found} />
+
+)