From b49bc27872d478c1783455466b2ef6328ac19145 Mon Sep 17 00:00:00 2001 From: Mikola Date: Thu, 9 Nov 2023 21:08:08 +0300 Subject: [PATCH] Footer --- package-lock.json | 61 +++++++++++++++ package.json | 1 + public/index.html | 2 +- src/App.js | 7 +- src/components/BreadCrumbs/BreadCrumbs.js | 20 +++++ src/components/BreadCrumbs/breadCrumbs.scss | 10 +++ src/components/Footer/Footer.js | 66 ++++++++++++++++ src/components/Footer/footer.scss | 78 +++++++++++++++++++ src/components/Header/Header.js | 34 ++++---- src/components/Header/header.scss | 7 -- .../NavigationItem/NavigationItem.js | 0 .../NavigationItem/navigationItem.scss | 0 .../SocialItem/SocialItem.js | 0 .../SocialItem/socialItem.scss | 0 src/index.css | 8 ++ src/index.js | 5 +- src/logo.svg | 1 - src/pages/Home/Home.js | 11 ++- src/pages/Home/home.scss | 5 ++ 19 files changed, 286 insertions(+), 30 deletions(-) create mode 100644 src/components/BreadCrumbs/BreadCrumbs.js create mode 100644 src/components/BreadCrumbs/breadCrumbs.scss create mode 100644 src/components/Footer/Footer.js create mode 100644 src/components/Footer/footer.scss rename src/{pages => components}/NavigationItem/NavigationItem.js (100%) rename src/{pages => components}/NavigationItem/navigationItem.scss (100%) rename src/{pages => components}/SocialItem/SocialItem.js (100%) rename src/{pages => components}/SocialItem/socialItem.scss (100%) delete mode 100644 src/logo.svg diff --git a/package-lock.json b/package-lock.json index 1e0d84c..deee505 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.18.0", "react-scripts": "5.0.1", "sass": "^1.69.5", "web-vitals": "^2.1.4" @@ -3262,6 +3263,14 @@ } } }, + "node_modules/@remix-run/router": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz", + "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==", + "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", @@ -14731,6 +14740,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz", + "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==", + "dependencies": { + "@remix-run/router": "1.11.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz", + "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==", + "dependencies": { + "@remix-run/router": "1.11.0", + "react-router": "6.18.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", @@ -20081,6 +20120,11 @@ "source-map": "^0.7.3" } }, + "@remix-run/router": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.11.0.tgz", + "integrity": "sha512-BHdhcWgeiudl91HvVa2wxqZjSHbheSgIiDvxrF1VjFzBzpTtuDPkOdOi3Iqvc08kXtFkLjhbS+ML9aM8mJS+wQ==" + }, "@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -28264,6 +28308,23 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==" }, + "react-router": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.18.0.tgz", + "integrity": "sha512-vk2y7Dsy8wI02eRRaRmOs9g2o+aE72YCx5q9VasT1N9v+lrdB79tIqrjMfByHiY5+6aYkH2rUa5X839nwWGPDg==", + "requires": { + "@remix-run/router": "1.11.0" + } + }, + "react-router-dom": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.18.0.tgz", + "integrity": "sha512-Ubrue4+Ercc/BoDkFQfc6og5zRQ4A8YxSO3Knsne+eRbZ+IepAsK249XBH/XaFuOYOYr3L3r13CXTLvYt5JDjw==", + "requires": { + "@remix-run/router": "1.11.0", + "react-router": "6.18.0" + } + }, "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 841f63f..b2ed7e8 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.18.0", "react-scripts": "5.0.1", "sass": "^1.69.5", "web-vitals": "^2.1.4" diff --git a/public/index.html b/public/index.html index aa069f2..1d81e9b 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Test diff --git a/src/App.js b/src/App.js index 1720bef..a97aba7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,11 +1,16 @@ import Header from "./components/Header/Header"; import Home from "./pages/Home/Home"; +import Footer from "./components/Footer/Footer"; + function App() { return (
- +
+ +
+
); } diff --git a/src/components/BreadCrumbs/BreadCrumbs.js b/src/components/BreadCrumbs/BreadCrumbs.js new file mode 100644 index 0000000..5fe0527 --- /dev/null +++ b/src/components/BreadCrumbs/BreadCrumbs.js @@ -0,0 +1,20 @@ +import React from "react"; +import { Link } from "react-router-dom"; + +import "./breadCrumbs.scss"; + +const BreadCrumbs = ({links}) => { + return ( +
+ {links.map((link, index) => { + return ( + + {link.name} + + ); + })} +
+ ); +}; + +export default BreadCrumbs; diff --git a/src/components/BreadCrumbs/breadCrumbs.scss b/src/components/BreadCrumbs/breadCrumbs.scss new file mode 100644 index 0000000..f6fadad --- /dev/null +++ b/src/components/BreadCrumbs/breadCrumbs.scss @@ -0,0 +1,10 @@ +.breadcrumbs { + display: flex; + padding: 15px 0; + column-gap: 10px; + + a { + color: #b6b6b6; + text-decoration: none; + } +} diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js new file mode 100644 index 0000000..1f291b6 --- /dev/null +++ b/src/components/Footer/Footer.js @@ -0,0 +1,66 @@ +import React from "react"; + +import "./footer.scss"; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss new file mode 100644 index 0000000..4dc0d65 --- /dev/null +++ b/src/components/Footer/footer.scss @@ -0,0 +1,78 @@ +.footer { + padding: 50px 0 35px; + background-color: #4d4d4d; + color: white; + height: 450px; + + &__info { + display: flex; + flex-direction: column; + max-width: 350px; + justify-content: space-between; + height: 100%; + margin-right: 200px; + + &Top { + display: flex; + flex-direction: column; + + p { + font-weight: 700; + font-size: 20px; + } + + span { + cursor: pointer; + margin: 20px 15px 25px; + } + + button { + padding: 10px; + border-radius: 8px; + cursor: pointer; + outline: none; + border: none; + max-width: 250px; + color: white; + font-weight: 600; + background-color: gray; + } + } + + &Bottom { + display: flex; + flex-direction: column; + } + } + + &__items { + display: flex; + width: 100%; + justify-content: space-between; + height: 100%; + } + + &__item { + display: flex; + flex-direction: column; + justify-content: space-between; + height: 100%; + + &Top { + display: flex; + flex-direction: column; + row-gap: 10px; + + a { + text-decoration: none; + color: white; + } + } + + &Bottom { + display: flex; + flex-direction: column; + row-gap: 10px; + } + } +} diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 55cb882..f997905 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -1,7 +1,7 @@ import React from "react"; -import NavigationItem from "../../pages/NavigationItem/NavigationItem"; -import SocialItem from "../../pages/SocialItem/SocialItem"; +import NavigationItem from "../NavigationItem/NavigationItem"; +import SocialItem from "../SocialItem/SocialItem"; import instagram from "../../assets/images/socials/instagram.png"; import whatsapp from "../../assets/images/socials/whatsapp.png"; @@ -13,21 +13,21 @@ import "./header.scss"; const Header = () => { const navigationItems = ["Аукционы", "Поставщики", "Одобрение заявок"] const socials = [ - { - name: "faceBook", - img: faceBook, - href: "#" - }, - { - name: "instagram", - img: instagram, - href: "#" - }, - { - name: "whatsapp", - img: whatsapp, - href: "#" - }, + { + name: "faceBook", + img: faceBook, + href: "#" + }, + { + name: "instagram", + img: instagram, + href: "#" + }, + { + name: "whatsapp", + img: whatsapp, + href: "#" + }, ] return (
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss index ce872eb..e6b0123 100644 --- a/src/components/Header/header.scss +++ b/src/components/Header/header.scss @@ -1,10 +1,3 @@ -.container { - display: flex; - align-items: center; - max-width: 1280px; - margin: 0 auto; -} - .header { padding: 10px; background: gray; diff --git a/src/pages/NavigationItem/NavigationItem.js b/src/components/NavigationItem/NavigationItem.js similarity index 100% rename from src/pages/NavigationItem/NavigationItem.js rename to src/components/NavigationItem/NavigationItem.js diff --git a/src/pages/NavigationItem/navigationItem.scss b/src/components/NavigationItem/navigationItem.scss similarity index 100% rename from src/pages/NavigationItem/navigationItem.scss rename to src/components/NavigationItem/navigationItem.scss diff --git a/src/pages/SocialItem/SocialItem.js b/src/components/SocialItem/SocialItem.js similarity index 100% rename from src/pages/SocialItem/SocialItem.js rename to src/components/SocialItem/SocialItem.js diff --git a/src/pages/SocialItem/socialItem.scss b/src/components/SocialItem/socialItem.scss similarity index 100% rename from src/pages/SocialItem/socialItem.scss rename to src/components/SocialItem/socialItem.scss diff --git a/src/index.css b/src/index.css index d77fab2..ea265a7 100644 --- a/src/index.css +++ b/src/index.css @@ -41,3 +41,11 @@ code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } + +.container { + display: flex; + align-items: center; + max-width: 1280px; + margin: 0 auto; + height: 100%; +} diff --git a/src/index.js b/src/index.js index d563c0f..a68d745 100644 --- a/src/index.js +++ b/src/index.js @@ -3,11 +3,14 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import { BrowserRouter } from 'react-router-dom' const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - + + + ); diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js index dfa88c9..768cfbf 100644 --- a/src/pages/Home/Home.js +++ b/src/pages/Home/Home.js @@ -1,9 +1,16 @@ import React from "react"; +import BreadCrumbs from "../../components/BreadCrumbs/BreadCrumbs"; + +import "./home.scss" + const Home = () => { return ( -
- 1234Holo +
+ +

Аукционы

); }; diff --git a/src/pages/Home/home.scss b/src/pages/Home/home.scss index e69de29..d575d57 100644 --- a/src/pages/Home/home.scss +++ b/src/pages/Home/home.scss @@ -0,0 +1,5 @@ +.home { + &__title { + font-size: 40px; + } +}