diff --git a/package-lock.json b/package-lock.json index 8607505..c5f9c50 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,11 +8,13 @@ "name": "cryptor", "version": "0.1.0", "dependencies": { + "@babel/plugin-proposal-private-property-in-object": "7.21.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.19.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" } @@ -645,9 +647,16 @@ } }, "node_modules/@babel/plugin-proposal-private-property-in-object": { - "version": "7.21.0-placeholder-for-preset-env.2", - "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", - "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz", + "integrity": "sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.", + "dependencies": { + "@babel/helper-annotate-as-pure": "^7.18.6", + "@babel/helper-create-class-features-plugin": "^7.21.0", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-private-property-in-object": "^7.14.5" + }, "engines": { "node": ">=6.9.0" }, @@ -1890,6 +1899,17 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": { + "version": "7.21.0-placeholder-for-preset-env.2", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", + "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==", + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/preset-env/node_modules/semver": { "version": "6.3.1", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz", @@ -3261,6 +3281,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.12.0.tgz", + "integrity": "sha512-2hXv036Bux90e1GXTWSMfNzfDDK8LA8JYEWfyHxzvwdp6GyoWEovKc9cotb3KCKmkdwsIBuFGX7ScTWyiHv7Eg==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14725,6 +14753,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.19.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.19.0.tgz", + "integrity": "sha512-0W63PKCZ7+OuQd7Tm+RbkI8kCLmn4GPjDbX61tWljPxWgqTKlEpeQUwPkT1DRjYhF8KSihK0hQpmhU4uxVMcdw==", + "dependencies": { + "@remix-run/router": "1.12.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.19.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.19.0.tgz", + "integrity": "sha512-N6dWlcgL2w0U5HZUUqU2wlmOrSb3ighJmtQ438SWbhB1yuLTXQ8yyTBMK3BSvVjp7gBtKurT554nCtMOgxCZmQ==", + "dependencies": { + "@remix-run/router": "1.12.0", + "react-router": "6.19.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index c6039be..933af90 100644 --- a/package.json +++ b/package.json @@ -3,11 +3,13 @@ "version": "0.1.0", "private": true, "dependencies": { + "@babel/plugin-proposal-private-property-in-object": "7.21.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.19.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, diff --git a/src/App.css b/src/App.css index 74b5e05..e994711 100644 --- a/src/App.css +++ b/src/App.css @@ -1,38 +1,3 @@ .App { text-align: center; -} - -.App-logo { - height: 40vmin; - pointer-events: none; -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3784575..5d9c471 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,17 @@ -import logo from './logo.svg'; +import iconSend from './iconSend.svg'; +import iconReceive from './iconReceive.svg'; import './App.css'; +import ImgButton from './widgets/ImgButton'; +import { useNavigate } from 'react-router-dom'; -function App() { +function App(props) { + const navigate = useNavigate(); return (
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
+

цифровой рубль

+

(баланс)

+ navigate('/send_method')} img={iconSend} label="отправить" /> +
); } diff --git a/src/SendMethodPage.css b/src/SendMethodPage.css new file mode 100644 index 0000000..13f43a8 --- /dev/null +++ b/src/SendMethodPage.css @@ -0,0 +1,9 @@ +.send-method-page { + margin: 15px; +} + +.button-list button { + display: block; + margin: 5px 10px; + width: calc(100% - 20px); +} \ No newline at end of file diff --git a/src/SendMethodPage.js b/src/SendMethodPage.js new file mode 100644 index 0000000..58001b7 --- /dev/null +++ b/src/SendMethodPage.js @@ -0,0 +1,14 @@ +import './SendMethodPage.css'; + +export default function SendMethodPage() { + return ( +
+

как вы хотите совершить перевод?

+
+ + + +
+
+ ); +} \ No newline at end of file diff --git a/src/iconReceive.svg b/src/iconReceive.svg new file mode 100644 index 0000000..6a171ea --- /dev/null +++ b/src/iconReceive.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/iconSend.svg b/src/iconSend.svg new file mode 100644 index 0000000..39ca964 --- /dev/null +++ b/src/iconSend.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.js b/src/index.js index d563c0f..873669d 100644 --- a/src/index.js +++ b/src/index.js @@ -3,11 +3,25 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import { Route, RouterProvider, createBrowserRouter, createRoutesFromElements } from 'react-router-dom'; +import SendMethodPage from './SendMethodPage'; +const router = createBrowserRouter( + [ + { + path: "/", + element: + }, + { + path: "send_method", + element: + } + ] +); const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + ); diff --git a/src/widgets/ImgButton.js b/src/widgets/ImgButton.js new file mode 100644 index 0000000..932ca1f --- /dev/null +++ b/src/widgets/ImgButton.js @@ -0,0 +1,5 @@ +export default function ImgButton(props) { + return ( + + ); +} \ No newline at end of file