Merge pull request #5 from InVi-teamates/develop-thanhngan22

feat: ✨ #1 working on search-bar and nav-bar ⭐

package.json

@@ -7,6 +7,8 @@
     "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.2.0",
+    "node": "16.16",
+    "node-modules": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^2.1.3",

src/App.js

@@ -5,6 +5,8 @@ import Footer from './components/footer/Footer';
 import Carousel from './components/Carousel';
 import CardContainer from './components/CardContainer';
 import RowContainer from './components/RowContainer';
+import NavBar from './components/NavBar';
+import SearchBar from './components/SearchBar';
 
 function App() {
 
@@ -23,6 +25,8 @@ function App() {
 
   return (
     <div>
+      <SearchBar/>
+      <NavBar/>
       <Carousel />
       <CardContainer />
       <RowContainer heading="Top Sellers in Books for you" imgUrls={booksImgUrls} />

src/components/NavBar.js

@@ -1,7 +1,34 @@
 import React from 'react'
+import '../styles/navbar.css'
 
 export default function NavBar() {
     return (
-        <div>NavBar</div>
+        <div className='nav-bar-container'>
+        <ul className='nav-bar'>
+            <li className='nav-bar-item' >
+                <a href='#' style = {{display: 'flex'}}>
+                    <div>
+                        <i className='ti-menu' style = {{paddingRight: '6px'}}></i>
+                    </div>
+                    All
+                </a>
+            </li>
+            <li className='nav-bar-item'>
+                <a href='#'>Today's Deals</a>
+            </li>
+            <li className='nav-bar-item'>
+                <a href='#'>Customer Service</a>
+            </li>
+            <li className='nav-bar-item'>
+                <a href='#'>Registry</a>
+            </li>
+            <li className='nav-bar-item'>
+                <a href='#'>Gift Cards</a>
+            </li>
+            <li className='nav-bar-item'>
+                <a href='#'>Sell</a>
+            </li>
+        </ul>
+        </div>
     )
 }

src/components/SearchBar.js

@@ -1,7 +1,134 @@
-import React from 'react'
+import React from 'react';
+import '../styles/searchbar.css';
+import logo from '../assets/images/logo-searchbar.png';
+import flag from '../assets/images/flag-searchbar.jpg';
+// import cart from '../assets/images/cart-searchbar.jpg';
+
 
 export default function SearchBar() {
     return (
-        <div>SearchBar</div>
+        <div className='search-bar'>
+            <ul className='search-bar-list'>
+                <li className='search-bar--item'>
+                    <a href='#' className='searchbar-logo ' >
+                        <img src={logo} alt='logo' />
+                    </a>
+                </li>
+                <li className='search-bar--item'>
+                    <a href='#' className='location' style={{height: '100%',display: 'flex', flexDirection: 'row', alignItems: 'center', color: '#fff', padding: '0 8px'}}>
+                        <i className = 'ti-location-pin' style={{fontSize: '20px', paddingRight: '4px', paddingTop: '4px'}}>
+                        </i>
+                        <p style = {{display: 'flex', flexDirection: 'column', padding: '6px 4px 2px', margin: '0'}}>
+                            <span style={{fontSize: '12px'}}>Deliver to</span>
+                            <span style={{fontSize: '14px', fontWeight: 'bold'}}>Vietnam</span>
+                        </p>                        
+                    </a>
+                </li>
+                <li className='search-bar--item' style={{padding: '8px 24px'}}>
+                    <form>
+                        <div className='search-bar--input' style={{display: 'flex', border: '1px solid #cdcdcd',borderRadius: '4px 4px',}}>
+
+                        <div className='search-bar-input--select'>
+                            <select style={{
+                            height: '40px',
+                            width: '52px',
+                            fontSize: '14px',
+                            paddingLeft: '6px',
+                            border: 'none',
+                            borderRight: '#cdcdcd 1px solid',
+                            borderRadius: '4px 0px 0px 4px',
+                        }}>
+                                <option value='All'>All</option>
+
+                            </select>
+                        </div>
+                        <input type='text'  style={{width: '1100px', border: 'none' }} />
+                        <span className='go-search' style={{width: '45px'}}>
+                            <i className='ti-search' style={{
+                                                                position: 'absolute', 
+                                                                padding: '8px 12px', 
+                                                                backgroundColor: '#febd69',
+                                                                fontSize: `20px`,
+                                                                fontWeight: 'bold',
+                                                                width: '45px',
+                                                                height: '40px',
+                                                                }} />
+                            <input  type='submit' value='go' style={{width: '45px', height: '40px'}} />
+                        </span>
+                        </div>
+                    </form>
+
+                </li>
+                <li className='search-bar--item' >
+                    <a className = "change-language" href='#' style={{
+                                                                    display: 'flex',
+                                                                    flexDirection: 'row',
+                                                                    padding: '16px 10px 8px'
+
+                }}>
+                        <span >
+                            <img src={flag} alt='flag' style={{
+                                width: '24px',
+                                height: '18px',
+                                fitObject: 'center'
+                            }}/>
+                        </span>
+                        <span style={{padding: '14px 6px'}}>
+                            <div style={{
+                                width: '10px',
+                                height: '6px',
+                                backgroundColor: 'gray',
+                                clipPath: 'polygon(0 0, 100% 0, 50% 100%)',
+                            }}></div>
+                        </span>
+                    </a>
+                </li>
+                <li className='search-bar--item'>
+                    <a className='sign-in' href='#' style={{display:'flex', flexDirection: 'column', padding: ' 10px'}}>
+                        <span style={{fontSize:'12px'}}>
+                            Hello, Sign in
+                        </span>
+                        <div style={{display: 'flex', flexDirection: 'row'}}>
+                            <span style={{fontSize: '14px', fontWeight: 'bold', }}>
+                                {`Account & Lists`}
+                            </span>
+                            <div style={{
+                                marginTop: '8px',
+                                marginLeft: '4px',
+                                width: '10px',
+                                height: '6px',
+                                backgroundColor: 'gray',
+                                clipPath: 'polygon(0 0, 100% 0, 50% 100%)',
+                            }}></div>
+                        </div>
+                    </a>
+                </li>
+                <li className='search-bar--item'>
+                    <a className = "returns-orders" href='#' style={{display: 'flex', flexDirection: 'column', padding: '10px 10px'}}>
+                        <span style={{fontSize: '12px'}}>
+                            Returns
+                        </span>
+                        <span style={{fontSize: '14px', fontWeight: 'bold'}}>
+                            {"& Orders"}
+                        </span>
+                    </a>
+                </li>
+                <li className='search-bar--item'>
+                    <a className = "cart" href = "#" style={{display: 'flex', flexDirection: 'row', padding: '2px 10px '}}>
+                        <div style={{display: 'flex', flexDirection: 'column'}}>
+                            <span style={{color: 'coral', fontWeight: 'bold', textAlign:'center', position:'absolute', width: '30px'}}>
+                                    {'0'}
+                            </span>
+                            <span style={{marginTop: '12px', paddingTop: '2px'}}>
+                                <i className='ti-shopping-cart' style={{fontSize: '32px', color: '#fff'}}/>
+                            </span>
+                        </div>
+                        <span style={{fontWeight: 'bold', padding: '20px 6px 10px'}}>
+                            {'Cart'}
+                        </span>
+                    </a>
+                </li>
+            </ul>
+        </div>
     )
 }

src/index.css

@@ -1,3 +1,11 @@
+@import '/styles/navbar.css';
+@import '/styles/searchbar.css';
+@import './styles/themify-icons/themify-icons.css';
+
+
+
+
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -11,3 +19,5 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+

src/index.js

@@ -4,6 +4,7 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>

src/styles/navbar.css

@@ -0,0 +1,40 @@
+.nav-bar-container {
+    background-color: #232f3e;
+    height: 39px;
+    width: 100%;
+
+}
+
+.nav-bar {
+    height: 100%;
+    padding-left: 15px;
+    margin: 0;
+    display: flex;
+    flex-direction: row;
+
+    list-style: none;
+
+    font-size: 14px;
+}
+
+.nav-bar-item {
+    align-self: center;
+    display: block;
+
+}
+
+.nav-bar-item a {
+    display: inline-block;
+    color: #fff;
+    text-decoration: none;
+
+    padding: 2px 11px;
+    margin : 5px 0 6px;
+
+}
+
+.nav-bar-item a:hover {
+    border: solid 1px #fff;
+}
+
+

src/styles/searchbar.css

@@ -0,0 +1,61 @@
+.search-bar a {
+    text-decoration: none;
+    color: #fff;
+}
+
+.search-bar {
+    height: 60px;
+    background-color: #0F1111;
+}
+
+.search-bar-list {
+    display: flex;
+    flex-direction: row;
+    list-style: none;
+
+    padding: 0;
+    margin: 0;
+
+
+}
+
+.search-bar--item {
+    height: 60px;
+    /* background-color: antiquewhite; */
+
+}
+
+.search-bar--item a {
+    border: solid 1px #0F1111;; 
+
+}
+
+.search-bar--item a:hover {
+    border: solid 1px #fff; 
+
+}
+
+.search-bar--item .searchbar-logo {
+    display: inline-block;
+    height: 100%;
+    margin-left: 15px;
+    padding: 1px 8px 0 6px;
+
+
+}
+.search-bar--item .searchbar-logo img {
+    width: 100px;
+    height: 50px;
+    border: solid 1px #0F1111;
+    margin: 6px 0 4px;
+    object-fit: cover;
+
+}
+
+.search-bar .search-bar--item select {
+    cursor: pointer;
+}
+
+.search-bar .search-bar--item .go-search  {
+    cursor: pointer;
+}