Result page

smartchoice/package.json

@@ -11,11 +11,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.3.0",
-    "react": "^18.2.0",
     "react-bootstrap": "^2.8.0",
-    "react-dom": "^18.2.0",
-
-    "react-router": "^6.14.2",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
     "styled-components": "^6.0.4",

smartchoice/src/App.js

@@ -1,21 +1,33 @@
-
-import './App.css';
-import Header from './Components/Header';
-import Footer from './Components/Footer.js';
-import HeaderAlt from './Components/HeaderAlt';
-import { Routes, Route} from 'react-router-dom'
-import ResultPage from './Components/ResultPage';
-import HomePage from './Components/HomePage';
+import "./App.css";
+import Header from "./Components/Header";
+import Footer from "./Components/Footer.js";
+import HeaderAlt from "./Components/HeaderAlt";
+import { Routes, Route } from "react-router-dom";
+import ResultPage from "./Components/ResultPage";
+import HomePage from "./Components/HomePage";
 
 function App() {
   return (
     <div className="app">
       <Routes>
-        <Route path='/result' element={<><Header /><HeaderAlt /><ResultPage /><Footer /></>}/>
-        <Route path='/' element={<><HomePage /></>} />
+        <Route
+          path="/result"
+          element={
+            <>
+              <ResultPage />
+            </>
+          }
+        />
+        <Route
+          path="/"
+          element={
+            <>
+              <HomePage />
+            </>
+          }
+        />
       </Routes>
     </div>
-
   );
 }
 

smartchoice/src/Components/Apis.js

@@ -56,6 +56,24 @@ const Apis = [
     category: "konga",
     ratings: "**",
   },
+
+  {
+    id: 7,
+    title: "I phone 14",
+    price: 1500,
+    image: "../image/phone.jpg",
+    category: "konga",
+    ratings: "**",
+  },
+
+  {
+    id: 8,
+    title: "I phone 14",
+    price: 1500,
+    image: "../image/phone.jpg",
+    category: "amazon",
+    ratings: "**",
+  },
 ];
 
 export default Apis;

smartchoice/src/Components/Header.js

@@ -121,6 +121,14 @@ function Header({ gotoMarket, gotoTrend, gotoHero, findHelp }) {
     };
   }, [onClickOutside]);
 
+  function handleSearch(e) {
+    e.preventDefault();
+    // setInput("");
+
+    console.log({ input });
+    setInput("");
+  }
+  //console.log({'message': searchData});
   return (
     <div className="header">
       <div className="header__width">
@@ -210,12 +218,14 @@ function Header({ gotoMarket, gotoTrend, gotoHero, findHelp }) {
               <input
                 type="text"
                 id="searchInput"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
                 ref={activeTab}
                 placeholder="Search products, brands and Categories"
               />
             </div>
             <div className="header__searchBtn">
-              <Button variant="contained" size="small">
+              <Button variant="contained" size="small" onClick={handleSearch}>
                 Search
               </Button>
             </div>

smartchoice/src/Components/ResultHeroSection.js

@@ -4,6 +4,7 @@ import Apis from "../Components/Apis";
 import "../Styles/TrendingCard.css";
 import { Typography } from "@mui/material";
 import "../Styles/ResultCard.css";
+import "bootstrap/dist/css/bootstrap.min.css";
 
 function ResultHeroSection() {
   const [data, setData] = useState(Apis);
@@ -15,50 +16,49 @@ function ResultHeroSection() {
     setData(result);
   };
   return (
-    <div className="heroSection">
+    <div className="heroSection ">
       <div className="heroSection__width">
-        <h1 className="text-center text-info">Ebay</h1>
+        {/* <h1 className="text-center text-info">Ebay</h1> */}
         <div className="container-fluid mx-2"> </div>
-        <div className="row mt-5 mx-2">
-          <div className="col-md-3">
+        <div className="row mx-2">
+          <div className="col-md-4 mt-4">
             <button
-              className="trendCard__box w-100 mb-4 mt-4"
+              className="trendCard__box"
               onClick={() => filterResult("ebay")}
             >
               Ebay
             </button>
             <button
-              className="trendCard__box w-100 mb-4 mt-4"
+              className="trendCard__box "
               onClick={() => filterResult("konga")}
             >
               Konga
             </button>
             <button
-              className="trendCard__box w-100 mb-4 mt-4"
+              className="trendCard__box"
               onClick={() => filterResult("amazon")}
             >
               Amazon
             </button>
-            <button
-              className="trendCard__box w-100 mb-4 mt-4"
-              onClick={() => setData(Apis)}
-            >
+            <button className="trendCard__box " onClick={() => setData(Apis)}>
               All
             </button>
           </div>
-          <div className="col-md-9 ">
+          <div className="col-md-12 mb-4 mt-4 ">
             <div className="row">
               {data.map((values) => {
                 //destructuring api data into values
-                const { id, title, price, image, ratings } = values;
+                const { id, title, price, image, ratings, category } = values;
                 return (
                   <>
-                    <div className="col-md-4  mt-4" key={id}>
+                    <div className="col-md-3  mt-4 mb-4" key={id}>
                       <div className="ResultCard">
                         <div className="ResultCard__box">
                           <button className="ResultCard__compare">
-                            <h5>Buy Now</h5>
+                            {/* <h5>Buy Now</h5> */}
+                            <h5>{category}</h5>
                           </button>
+
                           <div className="ResultCard__img">
                             <img
                               src="Images\favpng_iphone-7-plus-airpods-apple-earbuds-beats-electronics.png"

smartchoice/src/Components/ResultPage.js

@@ -1,15 +1,55 @@
-import React from 'react'
-import SectionHeader from './SectionHeader'
-import Trending from './Trending'
+import React from "react";
+import { useState, useRef } from "react";
+import SectionHeader from "./SectionHeader";
+import Trending from "./Trending";
+import HeaderAlt from "./HeaderAlt";
+import Footer from "./Footer";
+import Header from "./Header";
+import ResultHeroSection from "./ResultHeroSection";
 
 function ResultPage() {
-    return (
-        <div>
-            <h1>Your result Page will go here</h1>
-            <SectionHeader  tittle="Trending-Products" tittleBtn="More Products" />
-            <Trending />
-        </div>
-    )
+  const heroRef = useRef(null);
+  const mrktRef = useRef(null);
+  const trendRef = useRef(null);
+  const footRef = useRef(null);
+
+  //handles the click to scroll effect
+  const handleHero = () => {
+    heroRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  const handleMarket = () => {
+    mrktRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  const handleTrend = () => {
+    trendRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  const handleHelp = () => {
+    trendRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+
+  return (
+    <div>
+      <Header
+        gotoMarket={handleMarket}
+        gotoHero={handleHero}
+        gotoTrend={handleTrend}
+        findHelp={handleHelp}
+      />
+      <HeaderAlt
+        gotoMarket={handleMarket}
+        gotoHero={handleHero}
+        gotoTrend={handleTrend}
+        findHelp={handleHelp}
+      />
+      <ResultHeroSection />
+      <SectionHeader tittle="Trending-Products" tittleBtn="More Products" />
+      <Trending ref={trendRef} />
+      <Footer ref={footRef} />
+    </div>
+  );
 }
 
-export default ResultPage
+export default ResultPage;

smartchoice/src/Styles/Footer.css

@@ -14,27 +14,25 @@
   padding: 0px 140px 0px 140px;
 }
 
-
-@media screen and (max-width: 1279px){
-    .footer__width {
-        padding-left: 44px;
-        padding-right: 44px;
-    }
+@media screen and (max-width: 1279px) {
+  .footer__width {
+    padding-left: 44px;
+    padding-right: 44px;
+  }
 }
 
 @media screen and (max-width: 1023px) {
-    .footer__width {
-        padding-left: 40px;
-        padding-right: 40px;
-    }
+  .footer__width {
+    padding-left: 40px;
+    padding-right: 40px;
+  }
 }
 
 @media screen and (max-width: 767px) {
-    .footer__width {
-        padding-left: 20px;
-        padding-right: 20px;
-    }
-
+  .footer__width {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
 }
 
 .footer__content {
@@ -48,34 +46,32 @@
 }
 
 @media sreen and (max-width: 1279px) {
-    .footer__contentUp {
-        padding: 46px 0;
-    }
+  .footer__contentUp {
+    padding: 46px 0;
+  }
 }
 
 @media screen and (max-width: 1023px) {
-    .footer__contentUp {
-        padding: 42px 0 0;
-    }
+  .footer__contentUp {
+    padding: 42px 0 0;
+  }
 }
 
 @media screen and (max-width: 559px) {
-    .footer__contentUp {
-        display: block;
-    }
+  .footer__contentUp {
+    display: block;
+  }
 }
 
 .footer__contentUpLeft {
   display: flex;
   flex-wrap: wrap;
 }
 
-
-
 @media screen and (max-width: 786px) {
-    .footer__contentUpLeft {
-        display: block;
-    }
+  .footer__contentUpLeft {
+    display: block;
+  }
 }
 
 .footer__options {
@@ -91,15 +87,15 @@
 }
 
 @media screen and (min-width: 1279px) {
-    .footer__options {
-        padding-bottom: 20px;
-    }
+  .footer__options {
+    padding-bottom: 20px;
+  }
 }
 
 @media screen and (max-width: 1023px) {
-    .footer__options {
-        padding-bottom: 30px;
-    }
+  .footer__options {
+    padding-bottom: 30px;
+  }
 }
 
 .footerHeader {

smartchoice/src/Styles/ResultCard.css

@@ -31,7 +31,7 @@
 }
 
 .ResultCard__compare {
-  width: 135px;
+  width: 128px;
   height: 38px;
   background: white;
   background-color: orange;