diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..4d29575 --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* diff --git a/README.md b/README.md new file mode 100644 index 0000000..8514bc8 --- /dev/null +++ b/README.md @@ -0,0 +1,22 @@ +# Tablet Cashbox React Ui +Hi. I was create this projiect in the one of boring nights as a practice of my React, Redux etc skills. For me it's just a practice, by which i can improve my skills. + +In this project you can find Browser Cashbox, which can help you to oranize you business with just one tablet. So, in the screen you can see two main areas:
+* Cart on the right side of screen +* List of items of your business with groups (folders) etc + +Alse at the top of the screen you can see small navigation bar. Now it has not any functionality, but I wanna improve it in the case, where this UI will be useful for many people (or it will be one else boring night). + +As you can see, it's not a serious project. That's why I can't sell it or somethink else, I don't know. And that's why I can afford informal description. + +### Usage +You can start the project using command in your command line: +``` +yarn start +``` +I used `yarn` packet manager. If you want to start this project via `npm` just Google how you can do it. + +### How does it look like? +[firstPicture]: https://ibb.co/4ZzTmbC +[secondPicture]: https://ibb.co/88NWnvV +[thirdPicture]: https://ibb.co/4jVS6C7 \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..616ce05 --- /dev/null +++ b/package.json @@ -0,0 +1,41 @@ +{ + "name": "tablet-cashbox-react-ui", + "version": "0.1.0", + "private": true, + "dependencies": { + "@testing-library/jest-dom": "^5.11.4", + "@testing-library/react": "^11.1.0", + "@testing-library/user-event": "^12.1.10", + "react": "^17.0.2", + "react-dom": "^17.0.2", + "react-redux": "^7.2.4", + "react-router-dom": "^5.2.0", + "react-scripts": "4.0.3", + "redux": "^4.1.0", + "web-vitals": "^1.0.1" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..a11777c Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..9b54e4e --- /dev/null +++ b/public/index.html @@ -0,0 +1,20 @@ + + + + + + + + + + + React App + + + +
+ + diff --git a/public/logo192.png b/public/logo192.png new file mode 100644 index 0000000..fc44b0a Binary files /dev/null and b/public/logo192.png differ diff --git a/public/logo512.png b/public/logo512.png new file mode 100644 index 0000000..a4e47a6 Binary files /dev/null and b/public/logo512.png differ diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..080d6c7 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/public/robots.txt b/public/robots.txt new file mode 100644 index 0000000..e9e57dc --- /dev/null +++ b/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..77e2852 --- /dev/null +++ b/src/App.js @@ -0,0 +1,22 @@ +import React from 'react' +import CashBox from './components/Cashbox/CashBox'; +import NavigationBar from './components/NavigationBar/NavigationBar'; +// import { createStore, compose } from "redux"; +// import { Provider } from "react-redux"; +// import rootReducer from "./redux/reducers/rootReducer"; + +// const composeEnhancers = +// typeof window === "object" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ +// ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) +// : compose; + +// const store = createStore(rootReducer, composeEnhancers()); + +const App = () => ( + <> + + + +) + +export default App; diff --git a/src/components/Cashbox/CartItem/CartItem.js b/src/components/Cashbox/CartItem/CartItem.js new file mode 100644 index 0000000..d3152f0 --- /dev/null +++ b/src/components/Cashbox/CartItem/CartItem.js @@ -0,0 +1,71 @@ +import React, { useState, useRef, useEffect } from 'react' +import classes from './CartItem.module.css' + +const CartItem = ({name, count, price, onDelete, onInc, onDec}) => { + const [showConrollsPanel, setShowConrollsPanel] = useState(false); + + const cartItem = useRef(null) + + const openConrollsPanel = () => { + setShowConrollsPanel(true) + } + + const closeControllsPanel = () => { + setShowConrollsPanel(false) + } + + const incrementItem = () => { + onInc(name) + closeControllsPanel() + } + + const decrementItem = () => { + onDec(name) + closeControllsPanel() + } + + const deleteItem = () => { + onDelete(name) + closeControllsPanel() + }; + + + useEffect(() => { + const current = cartItem.current + + const onBlur = (e) => { + setTimeout(() => { + setShowConrollsPanel(false); + }, 100); + } + + current.addEventListener('blur', onBlur) + return () => { + current.removeEventListener('blur', onBlur) + } + }, []) + + return ( +
+ { showConrollsPanel && +
+ +
} +
+
+ {name} + {price} руб. +
+
+ {(price * count).toFixed(2)} руб. + {count} шт. +
+
+
+ ) +} + +export default CartItem \ No newline at end of file diff --git a/src/components/Cashbox/CartItem/CartItem.module.css b/src/components/Cashbox/CartItem/CartItem.module.css new file mode 100644 index 0000000..339629e --- /dev/null +++ b/src/components/Cashbox/CartItem/CartItem.module.css @@ -0,0 +1,138 @@ +.CartItem { + position: relative; + border: 2px solid #e6e6e6; + border-radius: 10px; + height: 80px; + overflow: hidden; + margin: 20px 0; + box-shadow: 0 5px 15px 5px rgba(0, 0, 0, 0.1); +} + +.CartItem:first-child { + margin-top: 0; +} +.CartItem:last-child { + margin-bottom: 0; +} + +.ItemControls { + position: absolute; + display: grid; + grid-template-rows: 1fr; + grid-template-columns: 2fr 2fr 2fr 5fr; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; + backdrop-filter: blur(2px); + opacity: 0.9; + border-radius: 8px; + background-color: #e6e6e6; +} +.Decrement, +.Delete, +.Increment, +.Close { + display: block; + position: relative; + width: 100%; + border: none; + background-color: transparent; +} + +.Decrement::after, +.Increment::after, +.Delete::after { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + opacity: 0.4; +} + +.Decrement { + background-image: linear-gradient(-135deg, #ffc579 0%, #ffae43 100%); +} + + +.Decrement::after { + background: no-repeat center url(./minus.svg); + background-size: 80% 80%; +} + +.Delete { + background-image: linear-gradient(-135deg, #ff4949 0%, #ca332e 100%); +} +.Delete::after { + background: no-repeat center url(./delete.svg); + background-size: 80% 80%; +} + +.Increment { + background-image: linear-gradient(-135deg, #a3ff47 0%, rgb(106, 209, 32) 100%); + border-top-right-radius: 10px; + border-bottom-right-radius: 10px; +} + +.Increment::after { + background: no-repeat center url(./plus.svg); + background-size: 80% 80%; +} + +.Close { + font-size: calc(12px + 0.8vw); + font-weight: bold; +} + +.ItemInfo { + position: absolute; + display: grid; + justify-content: space-between; + grid-template-columns: 2fr 2fr; + width: 100%; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 10px; + background: white; + border: none; + align-items: unset; + text-align: unset; + /* max-width: 60%; */ +} +.ItemInfo div { + display: flex; + flex-direction: column; + justify-content: space-between; + /* max-width: 60%; */ +} + +.ItemName { + display: -webkit-box; + width: 100%; + font-size: calc(10px + 0.6vw); + word-wrap: break-word; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.ItemPrice { + font-size: calc(8px + 0.6vw); +} + +.Sum { + font-weight: bold; + align-self: flex-end; + font-size: calc(8px + 0.6vw); +} + +.Count { + align-self: flex-end; + font-size: calc(6px + 0.8vw); +} diff --git a/src/components/Cashbox/CartItem/delete.svg b/src/components/Cashbox/CartItem/delete.svg new file mode 100644 index 0000000..092b764 --- /dev/null +++ b/src/components/Cashbox/CartItem/delete.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Cashbox/CartItem/minus.svg b/src/components/Cashbox/CartItem/minus.svg new file mode 100644 index 0000000..ba8ba95 --- /dev/null +++ b/src/components/Cashbox/CartItem/minus.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Cashbox/CartItem/plus.svg b/src/components/Cashbox/CartItem/plus.svg new file mode 100644 index 0000000..49210c6 --- /dev/null +++ b/src/components/Cashbox/CartItem/plus.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Cashbox/CashBox.js b/src/components/Cashbox/CashBox.js new file mode 100644 index 0000000..867e09f --- /dev/null +++ b/src/components/Cashbox/CashBox.js @@ -0,0 +1,62 @@ +import React from "react"; +import classes from "./CashBox.module.css"; +import CartItem from "./CartItem/CartItem"; +import { BrowserRouter, Switch, Route } from 'react-router-dom' +import { connect } from "react-redux"; +import MainPage from "./MainPage/MainPage"; +import InFolderPage from "./InFolderPage/InFolderPage"; +import EmptyCart from './EmptyCart/EmptyCart' + +import { DELETE_ITEM_FROM_CART, INCREMENT_CART_ITEM, DECREMENT_CART_ITEM } from '../../redux/actions/actionTypes' + +const CashBox = ({cart, deleteItemFromCart, incrementCartItem, decrementCartItem}) => { + return ( +
+
+ + + + + + +
+ +
+ ); +}; + +function mapStateToProps(state) { + return { + cart: state.cart, + folders: state.folders, + recent: state.recent + } +} + +function mapDispatchToProps(dispatch) { + return { + deleteItemFromCart: name => dispatch({type: DELETE_ITEM_FROM_CART, payload: name}), + incrementCartItem: name => dispatch({type: INCREMENT_CART_ITEM, payload: name}), + decrementCartItem: name => dispatch({type: DECREMENT_CART_ITEM, payload: name}) + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(CashBox); diff --git a/src/components/Cashbox/CashBox.module.css b/src/components/Cashbox/CashBox.module.css new file mode 100644 index 0000000..eeaa3df --- /dev/null +++ b/src/components/Cashbox/CashBox.module.css @@ -0,0 +1,51 @@ +.CashBox { + width: 100%; + height: 92vh; + display: grid; + grid-template-columns: 2fr 1fr; + grid-template-rows: 1fr; + +} +.CashBoxContent { + display: grid; + grid-auto-flow: row; + gap: 10px; + padding: 10px; + grid-auto-rows: calc((66.7vw / 4) - 10px); + grid-template-columns: repeat(4, 1fr); + width: 100%; + height: 100%; + overflow-y: auto; +} +.CartSum { + width: 100%; + height: 100%; + box-shadow: inset 2px 2px 15px 5px rgba(0, 0, 0, 0.2); + border-top-left-radius: 40px; + border-bottom-left-radius: 40px; + background-color: white; + overflow-y: scroll; + padding: 20px; + padding-bottom: 100px; + /* position: relative; */ +} +.MakeOrder { + position: absolute; + bottom: 20px; + right: 30px; + /* transform: translateX(-50%); */ + width: calc(33.3% - 60px); + height: 60px; + border-radius: 20px; + border: 2px solid rgb(25, 167, 32); + background-color: rgb(41, 165, 93); + color: white; + font-weight: bold; + font-size: calc(10px + 0.5vw); + box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.2); +} + +.MakeOrder:disabled { + background-color: #c5c5c5; + border: 2px solid #acacac; +} \ No newline at end of file diff --git a/src/components/Cashbox/EmptyCart/EmptyCart.js b/src/components/Cashbox/EmptyCart/EmptyCart.js new file mode 100644 index 0000000..74e245b --- /dev/null +++ b/src/components/Cashbox/EmptyCart/EmptyCart.js @@ -0,0 +1,10 @@ +import React from 'react' +import classes from './EmptyCart.module.css' + +const EmptyCart = () => { + return ( +

Корзина пуста

+ ) +} + +export default EmptyCart \ No newline at end of file diff --git a/src/components/Cashbox/EmptyCart/EmptyCart.module.css b/src/components/Cashbox/EmptyCart/EmptyCart.module.css new file mode 100644 index 0000000..08302d5 --- /dev/null +++ b/src/components/Cashbox/EmptyCart/EmptyCart.module.css @@ -0,0 +1,7 @@ +.EmptyCart { + position: absolute; + top: 50%; + right: calc(33.3% / 2 ); + transform: translate(50%, -100%); + color: #c5c5c5; +} \ No newline at end of file diff --git a/src/components/Cashbox/Folder/Folder.js b/src/components/Cashbox/Folder/Folder.js new file mode 100644 index 0000000..b1dca9b --- /dev/null +++ b/src/components/Cashbox/Folder/Folder.js @@ -0,0 +1,20 @@ +import React from 'react' +import classes from './Folder.module.css' +import { Link } from 'react-router-dom' + +const Folder = ({ foldername, count }) => { + return ( + + {foldername} +
+
+ {count} +
+ + ) +} + +export default Folder \ No newline at end of file diff --git a/src/components/Cashbox/Folder/Folder.module.css b/src/components/Cashbox/Folder/Folder.module.css new file mode 100644 index 0000000..8edbc19 --- /dev/null +++ b/src/components/Cashbox/Folder/Folder.module.css @@ -0,0 +1,63 @@ +.Folder { + width: 100%; + height: 100%; + border-radius: 20px; + padding: 15px; + display: flex; + flex-direction: column; + justify-content: space-between; + color: white; + box-shadow: 2px 2px 15px 5px rgba(0, 0, 0, 0.1); + text-decoration: none; +} + +.Folder span { + font-size: calc(8px + 1.2vw); + font-weight: bold; + display: -webkit-box; + font-size: calc(10px + 0.6vw); + word-wrap: break-word; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.Folder hr { + border: 1px solid rgba(255, 255, 255, 0.3); + width: 100%; +} + +span.Count { + font-size: calc(10px + 0.8vw); + box-shadow: none; + background-color: unset; +} + +.Folder:nth-child(9n + 1) { + background-image: linear-gradient(-135deg, #faea6f 0%, #e7c34e 100%); +} +.Folder:nth-child(9n + 2) { + background-image: linear-gradient(-135deg, #ffc579 0%, #ffae43 100%); +} +.Folder:nth-child(9n + 3) { + background-image: linear-gradient(-135deg, #fa8884 0%, #fc554f 100%); +} +.Folder:nth-child(9n + 4) { + background-image: linear-gradient(-135deg, #ff4949 0%, #ca332e 100%); +} +.Folder:nth-child(9n + 5) { + background-image: linear-gradient(-135deg, #a3ff47 0%, rgb(106, 209, 32) 100%); +} +.Folder:nth-child(9n + 6) { + background-image: linear-gradient(-135deg, #84d633 0%, rgb(87, 177, 24) 100%); +} +.Folder:nth-child(9n + 7) { + background-image: linear-gradient(-135deg, #6fe6b4 0%, rgb(57, 194, 218) 100%); +} +.Folder:nth-child(9n + 8) { + background-image: linear-gradient(-135deg, #78d3ee 0%, rgb(69, 171, 226) 100%); +} +.Folder:nth-child(9n + 9) { + background-image: linear-gradient(-135deg, #59a8e9 0%, rgb(40, 112, 206) 100%); +} \ No newline at end of file diff --git a/src/components/Cashbox/InFolderPage/GoMainPageButton/GoMainPageButton.js b/src/components/Cashbox/InFolderPage/GoMainPageButton/GoMainPageButton.js new file mode 100644 index 0000000..64d95dc --- /dev/null +++ b/src/components/Cashbox/InFolderPage/GoMainPageButton/GoMainPageButton.js @@ -0,0 +1,11 @@ +import React from 'react' +import { Link } from 'react-router-dom' +import classes from './GoMainPageButton.module.css' + +const GoMainPageButton = () => { + return ( + + ) +} + +export default GoMainPageButton \ No newline at end of file diff --git a/src/components/Cashbox/InFolderPage/GoMainPageButton/GoMainPageButton.module.css b/src/components/Cashbox/InFolderPage/GoMainPageButton/GoMainPageButton.module.css new file mode 100644 index 0000000..c5a8538 --- /dev/null +++ b/src/components/Cashbox/InFolderPage/GoMainPageButton/GoMainPageButton.module.css @@ -0,0 +1,11 @@ +.GoMainPageButton { + width: 100%; + height: 100%; + border-radius: 20px; + color: white; + box-shadow: 2px 2px 15px 5px rgba(0, 0, 0, 0.1); + overflow: hidden; + background: no-repeat center url(./back.svg); + background-size: 50% 50%; + background-color: #424761; +} \ No newline at end of file diff --git a/src/components/Cashbox/InFolderPage/GoMainPageButton/back.svg b/src/components/Cashbox/InFolderPage/GoMainPageButton/back.svg new file mode 100644 index 0000000..1c16146 --- /dev/null +++ b/src/components/Cashbox/InFolderPage/GoMainPageButton/back.svg @@ -0,0 +1,11 @@ + + + + + + + diff --git a/src/components/Cashbox/InFolderPage/InFolderPage.js b/src/components/Cashbox/InFolderPage/InFolderPage.js new file mode 100644 index 0000000..b7c4cc4 --- /dev/null +++ b/src/components/Cashbox/InFolderPage/InFolderPage.js @@ -0,0 +1,28 @@ +import React from 'react' +import Item from '../Item/Item' +import { connect } from 'react-redux' +import GoMainPageButton from './GoMainPageButton/GoMainPageButton' + +const InFolderPage = ({ db , match}) => { + return ( + <> + + {db[decodeURI(match.params.foldername)].map((item) => ( + + ))} + + ) +} + +function mapStateToProps(state) { + return { + db: state.db + } +} + +export default connect(mapStateToProps)(InFolderPage); \ No newline at end of file diff --git a/src/components/Cashbox/Item/Item.js b/src/components/Cashbox/Item/Item.js new file mode 100644 index 0000000..6cd1603 --- /dev/null +++ b/src/components/Cashbox/Item/Item.js @@ -0,0 +1,26 @@ +import React from 'react' +import classes from './Item.module.css' +import { connect } from 'react-redux' +import { ADD_ITEM_TO_CART } from '../../../redux/actions/actionTypes' +import { Link } from 'react-router-dom' + +const Item = ({ name, img, price, addToCart }) => { + + return ( + addToCart(name, img, price)}> +
+ {name} + {price} +
+ PRODUCT_PHOTO + + ) +} + +function mapDispatchToProps(dispatch) { + return { + addToCart: (name, img, price) => dispatch({type: ADD_ITEM_TO_CART, name, img, price}) + } +} + +export default connect(null, mapDispatchToProps)(Item) \ No newline at end of file diff --git a/src/components/Cashbox/Item/Item.module.css b/src/components/Cashbox/Item/Item.module.css new file mode 100644 index 0000000..d1ca744 --- /dev/null +++ b/src/components/Cashbox/Item/Item.module.css @@ -0,0 +1,80 @@ +.Item { + position: relative; + width: 100%; + height: 100%; + border-radius: 20px; + color: white; + box-shadow: 2px 2px 15px 5px rgba(0, 0, 0, 0.1); + overflow: hidden; + text-decoration: none; +} + +.Item img { + position: absolute; + bottom: 0; + left: 0; + right: 0; + max-width: 100%; + max-height: 75%; + transform: translate(-20%, 10%); + z-index: 1; +} + +.ItemContent { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + display: flex; + justify-content: space-between; + flex-direction: column; + padding: 15px; + z-index: 1000; +} + +.Name { + font-size: calc(8px + 1.2vw); + font-weight: bold; + display: -webkit-box; + font-size: calc(10px + 0.6vw); + word-wrap: break-word; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-overflow: ellipsis; +} + +.Price { + align-self: flex-end; + font-size: calc(10px + 0.8vw); + box-shadow: none; + background-color: unset; +} +.Item:nth-child(9n + 1) { + background-image: linear-gradient(-135deg, #faea6f 0%, #e7c34e 100%); +} +.Item:nth-child(9n + 2) { + background-image: linear-gradient(-135deg, #ffc579 0%, #ffae43 100%); +} +.Item:nth-child(9n + 3) { + background-image: linear-gradient(-135deg, #fa8884 0%, #fc554f 100%); +} +.Item:nth-child(9n + 4) { + background-image: linear-gradient(-135deg, #ff4949 0%, #ca332e 100%); +} +.Item:nth-child(9n + 5) { + background-image: linear-gradient(-135deg, #a3ff47 0%, rgb(106, 209, 32) 100%); +} +.Item:nth-child(9n + 6) { + background-image: linear-gradient(-135deg, #84d633 0%, rgb(87, 177, 24) 100%); +} +.Item:nth-child(9n + 7) { + background-image: linear-gradient(-135deg, #6fe6b4 0%, rgb(57, 194, 218) 100%); +} +.Item:nth-child(9n + 8) { + background-image: linear-gradient(-135deg, #78d3ee 0%, rgb(69, 171, 226) 100%); +} +.Item:nth-child(9n + 9) { + background-image: linear-gradient(-135deg, #59a8e9 0%, rgb(40, 112, 206) 100%); +} \ No newline at end of file diff --git a/src/components/Cashbox/MainPage/MainPage.js b/src/components/Cashbox/MainPage/MainPage.js new file mode 100644 index 0000000..a66eb5a --- /dev/null +++ b/src/components/Cashbox/MainPage/MainPage.js @@ -0,0 +1,26 @@ +import React from 'react' +import Folder from '../Folder/Folder' +import { connect } from 'react-redux' + +const MainPage = ({folders, recent}) => { + return ( + <> + {folders.map((folder) => ( + + ))} + + ) +} + +function mapStateToProps(state) { + return { + folders: state.folders, + recent: state.recent + } +} + +export default connect(mapStateToProps)(MainPage); \ No newline at end of file diff --git a/src/components/NavigationBar/NavigationBar.js b/src/components/NavigationBar/NavigationBar.js new file mode 100644 index 0000000..90affad --- /dev/null +++ b/src/components/NavigationBar/NavigationBar.js @@ -0,0 +1,10 @@ +import React from 'react' +import classes from './NavigationBar.module.css' + +const NavigationBar = () => { + return ( +