Main

package.json

@@ -3,15 +3,22 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.3.0",
+    "@fortawesome/free-solid-svg-icons": "^6.3.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.58",
     "@testing-library/jest-dom": "^5.13.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "bootstrap": "^5.2.3",
+    "font-awesome": "^4.7.0",
     "react": "^17.0.2",
+    "react-bootstrap": "^2.7.2",
     "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "^6.9.0",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^1.1.2"
   },
   "scripts": {

src/App.jsx

@@ -1,7 +1,16 @@
 import React from 'react';
 import Home from './pages/Home';
 import './App.css';
+import { Route, Routes } from 'react-router-dom';
+import ProductDetail from './pages/ProducDetail';
+import SearchBar from './components/Home/SearchBar';
 
-const App = () => <Home />;
+const App = () =>
 
+
+<Routes>
+    <Route path='' element={<Home />}></Route>
+
+    <Route path='/products/:id' element={<ProductDetail />}></Route>
+</Routes>
 export default App;

src/components/Home/FilterPanel/index.jsx

@@ -1,19 +1,42 @@
 import React from 'react';
-import { categoryList, ratingList } from '../../../constants';
-import CheckboxProton from '../../common/CheckboxProton';
+// import { categoryList, ratingList } from '../../../constants';
+
 import FilterListToggle from '../../common/FilterListToggle';
 import SliderProton from '../../common/SliderProton';
 import './styles.css';
+const categoryList = [
+  {
+    id: 0,
+    value: `all`,
+    label: `all`,
+  },
+  {
+    id: 1,
+    value: `men's clothing`,
+    label: `mem's clothing`,
+  },
+  {
+    id: 2,
+    value: 'electronics',
+    label: 'electronics',
+  },
+  {
+    id: 3,
+    value: `women's clothing`,
+    label: `women's clothing`,
+  },
+
+
+]
 
 const FilterPanel = ({
+  minprice,
+  maxprice,
   selectedCategory,
   selectCategory,
-  selectedRating,
   selectedPrice,
-  selectRating,
-  cuisines,
-  changeChecked,
   changePrice,
+
 }) => (
   <div>
     <div className='input-group'>
@@ -22,30 +45,15 @@ const FilterPanel = ({
         options={categoryList}
         value={selectedCategory}
         selectToggle={selectCategory}
+
       />
     </div>
-    <div className='input-group'>
-      <p className='label'>Cuisine</p>
-      {cuisines.map((cuisine) => (
-        <CheckboxProton
-          key={cuisine.id}
-          cuisine={cuisine}
-          changeChecked={changeChecked}
-        />
-      ))}
-    </div>
-    <div className='input-group'>
+
+    <div className='input-price' >
       <p className='label-range'>Price Range</p>
-      <SliderProton value={selectedPrice} changePrice={changePrice} />
-    </div>
-    <div className='input-group'>
-      <p className='label'>Star Rating</p>
-      <FilterListToggle
-        options={ratingList}
-        value={selectedRating}
-        selectToggle={selectRating}
-      />
+      <SliderProton minprice={minprice} maxprice={maxprice} value={selectedPrice} changePrice={changePrice} />
     </div>
+
   </div>
 );
 

src/components/Home/FilterPanel/styles.css

@@ -8,3 +8,11 @@
 .label-range {
   margin-bottom: 2.5rem;
 }
+
+
+@media screen and (max-width:760px) {
+
+  .input-price{
+      display: none;
+    }
+  }

src/components/Home/List/ListItem/index.jsx

@@ -1,23 +1,19 @@
 import React from 'react';
 import './styles.css';
+import { NavLink } from 'react-router-dom';
 
 const ListItem = ({
-  item: { coverSrc, title, price, deliveryFee, serviceTime, rating },
+
+  item: {id, image, title, price, },
 }) => (
-  <div className='listItem-wrap'>
-    <img src={coverSrc} alt='' />
-    <header>
-      <h4>{title}</h4>
-      <span>🌟{rating}</span>
-    </header>
-    <footer>
-      <p>
-        <b>{serviceTime}</b> <span> Delivery Fee ${deliveryFee}</span>
-      </p>
-      <p>
-        <b>${price}</b>
-      </p>
-    </footer>
+
+  <div className="card my-5 py-4" style={{width:"18rem"}}>
+    <img className="card-img-top" style={{height:"270px"}} src={image}alt={title} />
+    <div className="card-body">
+      <h5 className="card-title">{title.substring(0, 16)}...</h5>
+      <p className="card-text">${price}</p>
+      <NavLink to={`/products/${id}`} style={{ width: "100%" }} className="add btn btn-outline-dark">By Now</NavLink>
+    </div>
   </div>
 );
 

src/components/Home/List/index.jsx

@@ -2,12 +2,25 @@ import React from 'react';
 import ListItem from './ListItem';
 import './styles.css';
 
-const List = ({ list }) => (
-  <div className='list-wrap'>
-    {list.map((item) => (
-      <ListItem key={item.id} item={item} />
-    ))}
-  </div>
-);
+
+function List  ({ list })  {
+
+
+  return(
+
+    <div className='row' style={{justifyContent:"space-around"}}>
+
+      {list.map((item) => (
+        <ListItem key={item.id} item={item} />
+
+      ))}
+
+    </div>
+
+  )
+
+}
+
+
 
 export default List;

src/components/Home/List/styles.css

@@ -1,5 +1,6 @@
 .list-wrap {
-  display: grid;
+  /* display: grid;
   grid-template-columns: repeat(3, 1fr);
-  grid-gap: 2rem;
+  grid-gap: 2rem; */
+
 }

src/components/Home/SearchBar/index.jsx

@@ -1,17 +1,51 @@
 import React from 'react';
 import './styles.css';
 import SearchIcon from '@material-ui/icons/Search';
+import Container from 'react-bootstrap/Container';
 
-const SearchBar = ({ value, changeInput }) => (
-  <div className='searchBar-wrap'>
-    <SearchIcon className='searchBar-icon' />
-    <input
-      type='text'
-      placeholder='Woodland Hills'
-      value={value}
-      onChange={changeInput}
-    />
-  </div>
-);
+import Nav from 'react-bootstrap/Nav';
+import Navbar from 'react-bootstrap/Navbar';
 
-export default SearchBar;
+import 'bootstrap/dist/css/bootstrap.min.css';
+import { NavLink } from 'react-router-dom';
+function SearchBar({ value, changeInput }) {
+  return (
+    <div className='navbar-header' >
+      <Navbar expand="lg">
+
+        <Container fluid style={{ padding: "0 40px" }}>
+          <li style={{ listStyleType: "none", textDecoration: "none" }}>
+            <NavLink style={{ textDecoration: "none",color:"#737373" }} to="/">SSG
+            </NavLink>
+          </li>
+          <Navbar.Toggle aria-controls="navbarScroll" />
+          <Navbar.Collapse id="navbarScroll" style={{ justifyContent: "space-around" }}>
+            <div >
+              <SearchIcon className='searchBar-icon' />
+              <input
+                style={{ border: "none", outline: "none", backgroundColor: "f8f9fa" }}
+                type='text'
+                placeholder='Search ...'
+                value={value}
+                onChange={changeInput}
+              />
+            </div>
+            <Nav
+              className=""
+              style={{ maxHeight: '100px' }}
+              navbarScroll
+            >
+              <Nav.Link href="#action1">Cart</Nav.Link>
+              <Nav.Link href="#action2">Login</Nav.Link>
+
+
+            </Nav>
+          </Navbar.Collapse>
+        </Container>
+
+      </Navbar>
+    </div>
+  );
+}
+
+export default SearchBar

src/components/Home/SearchBar/styles.css

@@ -1,3 +1,11 @@
+.navbar-header{
+  z-index: 10;
+  box-shadow: 0px 1px 3px #333;;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
 .searchBar-wrap {
   display: flex;
   align-items: center;