diff --git a/reactapp/package-lock.json b/reactapp/package-lock.json index 18c1025..f590360 100644 --- a/reactapp/package-lock.json +++ b/reactapp/package-lock.json @@ -19,6 +19,7 @@ "node-sass": "^9.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.0", "react-scripts": "5.0.1", "scss": "^0.2.4", "typescript": "^5.3.3", @@ -3416,6 +3417,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.0.tgz", + "integrity": "sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ==", + "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", @@ -16160,6 +16169,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz", + "integrity": "sha512-q2yemJeg6gw/YixRlRnVx6IRJWZD6fonnfZhN1JIOhV2iJCPeRNSH3V1ISwHf+JWcESzLC3BOLD1T07tmO5dmg==", + "dependencies": { + "@remix-run/router": "1.15.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.0.tgz", + "integrity": "sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==", + "dependencies": { + "@remix-run/router": "1.15.0", + "react-router": "6.22.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/reactapp/package.json b/reactapp/package.json index dad1678..0596dde 100644 --- a/reactapp/package.json +++ b/reactapp/package.json @@ -14,6 +14,7 @@ "node-sass": "^9.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.0", "react-scripts": "5.0.1", "scss": "^0.2.4", "typescript": "^5.3.3", diff --git a/reactapp/src/App.tsx b/reactapp/src/App.tsx index e148f6e..f1ac45f 100644 --- a/reactapp/src/App.tsx +++ b/reactapp/src/App.tsx @@ -1,14 +1,25 @@ -import HomePage from "./components/pages/HomePage"; -import Header from "./components/blocks/Header"; +import HomePage from "./pages/HomePage"; +import PaymentPage from "./pages/PaymentPage"; +import ProductPage from "./pages/ProductPage"; +import ProfilePage from "./pages/ProfilePage"; +import ScamPage from "./pages/ScamPage"; +import Header from "./components/Header"; import SearchIcon from "../src/assets/icons/search-form__icon.svg"; import React from "react"; +import { Routes, Route } from 'react-router-dom' export default function App() { return ( <>
- + + }/> + }/> + }/> + }/> + }/> +
); diff --git a/reactapp/src/ProfileStyle.scss b/reactapp/src/ProfileStyle.scss index e69de29..82f38c1 100644 --- a/reactapp/src/ProfileStyle.scss +++ b/reactapp/src/ProfileStyle.scss @@ -0,0 +1,11 @@ +$background-color: #252422; +$main-color: #CCC5B9; +$accent-color: #EB5E28; + +.profile-section { + width: 96%; + min-height: 100%; + display: flex; + flex-direction: column; + align-items: center; +} \ No newline at end of file diff --git a/reactapp/src/assets/img/amongasik.png b/reactapp/src/assets/img/amongasik.png new file mode 100644 index 0000000..ed4461a Binary files /dev/null and b/reactapp/src/assets/img/amongasik.png differ diff --git a/reactapp/src/components/blocks/AddBanner.tsx b/reactapp/src/components/AddBanner.tsx similarity index 100% rename from reactapp/src/components/blocks/AddBanner.tsx rename to reactapp/src/components/AddBanner.tsx diff --git a/reactapp/src/components/blocks/CatalogMenu.tsx b/reactapp/src/components/CatalogMenu.tsx similarity index 100% rename from reactapp/src/components/blocks/CatalogMenu.tsx rename to reactapp/src/components/CatalogMenu.tsx diff --git a/reactapp/src/components/blocks/Header.tsx b/reactapp/src/components/Header.tsx similarity index 93% rename from reactapp/src/components/blocks/Header.tsx rename to reactapp/src/components/Header.tsx index ffb05bc..0c0aa4b 100644 --- a/reactapp/src/components/blocks/Header.tsx +++ b/reactapp/src/components/Header.tsx @@ -1,10 +1,17 @@ import React from "react"; import { motion } from "framer-motion"; +import { Link } from "react-router-dom"; +import Logotype from "../assets/img/amongasik.png"; export default function Header(SearchIcon:any) { return(
-

SuSMarket

+

+ + Dead amongus + SuSMarket + +

- {/* Код для svg */} - + Created with Pixso. @@ -51,9 +59,9 @@ export default function Header(SearchIcon:any) { - + {/* Код для svg */} - + diff --git a/reactapp/src/components/ProfilePurchases.tsx b/reactapp/src/components/ProfilePurchases.tsx new file mode 100644 index 0000000..ce31a98 --- /dev/null +++ b/reactapp/src/components/ProfilePurchases.tsx @@ -0,0 +1,8 @@ +import React from "react"; + +export default function ProfilePurchases() { + return( + <> + + ) +} \ No newline at end of file diff --git a/reactapp/src/index.scss b/reactapp/src/index.scss index eee79ed..d6dc515 100644 --- a/reactapp/src/index.scss +++ b/reactapp/src/index.scss @@ -76,13 +76,20 @@ body { padding: 0px 40px 0px 40px; background-color: $background-color; - .header__title { - color: white; + .header__title-h1 { font-size: 24px; font-weight: 600; line-height: 29px; letter-spacing: 0%; text-align: left; + + .title-h1__a { + color: white; + + .header__logo-img { + width: 30px; + } + } } .catalog-button { diff --git a/reactapp/src/index.tsx b/reactapp/src/index.tsx index 948b29a..b742b4d 100644 --- a/reactapp/src/index.tsx +++ b/reactapp/src/index.tsx @@ -1,13 +1,15 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; +import { BrowserRouter } from 'react-router-dom'; import './index.scss'; -import './HomeStyle.scss'; import './reset.css'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); root.render( - + + + ); \ No newline at end of file diff --git a/reactapp/src/components/pages/HomePage.tsx b/reactapp/src/pages/HomePage.tsx similarity index 64% rename from reactapp/src/components/pages/HomePage.tsx rename to reactapp/src/pages/HomePage.tsx index b5caa3d..54c8950 100644 --- a/reactapp/src/components/pages/HomePage.tsx +++ b/reactapp/src/pages/HomePage.tsx @@ -1,16 +1,17 @@ import React from "react"; -import ProductCard from "../blocks/ProductCard"; -import Banner from "../blocks/AddBanner"; -import Image1 from "../../assets/img/product-image-1.webp"; -import Image2 from "../../assets/img/product-image-2.webp"; -import Image3 from "../../assets/img/product-image-3.webp"; -import Image4 from "../../assets/img/product-image-4.webp"; -import Image5 from "../../assets/img/product-image-5.webp"; -import Image6 from "../../assets/img/product-image-6.webp"; -import Image7 from "../../assets/img/product-image-7.webp"; -import Image8 from "../../assets/img/product-image-8.webp"; -import Image9 from "../../assets/img/product-image-9.webp"; -import Image10 from "../../assets/img/product-image-10.webp"; +import '../HomeStyle.scss' +import ProductCard from "../components/ProductCard"; +import Banner from "../components/AddBanner"; +import Image1 from "../assets/img/product-image-1.webp"; +import Image2 from "../assets/img/product-image-2.webp"; +import Image3 from "../assets/img/product-image-3.webp"; +import Image4 from "../assets/img/product-image-4.webp"; +import Image5 from "../assets/img/product-image-5.webp"; +import Image6 from "../assets/img/product-image-6.webp"; +import Image7 from "../assets/img/product-image-7.webp"; +import Image8 from "../assets/img/product-image-8.webp"; +import Image9 from "../assets/img/product-image-9.webp"; +import Image10 from "../assets/img/product-image-10.webp"; export default function HomePage() { return( diff --git a/reactapp/src/components/pages/PaymentPage.tsx b/reactapp/src/pages/PaymentPage.tsx similarity index 100% rename from reactapp/src/components/pages/PaymentPage.tsx rename to reactapp/src/pages/PaymentPage.tsx diff --git a/reactapp/src/components/pages/ProductPage.tsx b/reactapp/src/pages/ProductPage.tsx similarity index 100% rename from reactapp/src/components/pages/ProductPage.tsx rename to reactapp/src/pages/ProductPage.tsx diff --git a/reactapp/src/pages/ProfilePage.tsx b/reactapp/src/pages/ProfilePage.tsx new file mode 100644 index 0000000..dbb8eeb --- /dev/null +++ b/reactapp/src/pages/ProfilePage.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import Banner from "../components/AddBanner"; +import ProfileOrders from "../components/ProfileOrders"; +import ProfilePurchases from "../components/ProfilePurchases"; +import '../ProfileStyle.scss'; +import { Routes, Route, Link } from 'react-router-dom'; + +export default function ProfilePage() { + return( +
+ + + } /> + } /> + +
+ ) +} \ No newline at end of file diff --git a/reactapp/src/components/pages/ScamPage.tsx b/reactapp/src/pages/ScamPage.tsx similarity index 100% rename from reactapp/src/components/pages/ScamPage.tsx rename to reactapp/src/pages/ScamPage.tsx