Merge pull request #712 from Ojas-Arora/portal

Improve features on search results
SUGAM-ARORA · Aug 9, 2024 · bf33cf3 · bf33cf3
2 parents 34720fe + 41e82b4
commit bf33cf3
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 31 deletions.
diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css
@@ -17,6 +17,9 @@
   gap: 0.1rem;
   /* margin-left: 120px; */
 }
+#search_results a:hover div {
+  background-color: #cf00a3; /* This will change the text color to white for better contrast */
+}
 
 .lightbutton{
   width: auto;
@@ -103,6 +106,7 @@
   top: 40px;
   height: 200px;
   background: white;
+  color: white;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   width: 100%;
   z-index: 10;

diff --git a/src/Components/TopContainer.js b/src/Components/TopContainer.js
@@ -1,13 +1,24 @@
-import React, {useEffect, useState, useRef, useContext} from "react";
+import React, { useEffect, useState, useRef, useContext } from "react";
 import { BiSearchAlt } from "react-icons/bi";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBars, faHome, faInfoCircle, faWrench, faBriefcase, faStar, faUsers, faEnvelope, faQuestionCircle, faNewspaper, faTimes } from '@fortawesome/fontawesome-free-solid';
 import { Link } from 'react-router-dom';
-import {FaBell, FaChevronDown, FaMoon, FaSun} from "react-icons/fa";
+import { FaBell, FaChevronDown, FaMoon, FaSun } from "react-icons/fa";
 import women from "../img/women.jpg";
-import search from "./searchResults";
+import Card1 from "./projects/card1.jpg";
+import Card2 from "./projects/card2.jpg";
+import Card3 from "./projects/card3.jpg";
+import Card4 from "./projects/card4.jpg";
+import Card5 from "./projects/card5.jpg";
+import Card6 from "./projects/card6.jpg";
+import Card7 from "./projects/card7.png";
+import Card8 from "./projects/card8.png";
+import Card9 from "./projects/card9.png";
+import Card10 from "./projects/card10.png";
+import Card11 from "./projects/card11.png";
+import Card12 from "./projects/card12.png";
 import "./TopContainer.css";
-import {ThemeContext} from "../App"
+import { ThemeContext } from "../App";
 
 function TopContainer() {
   const [input, setInput] = useState("");
@@ -35,7 +46,7 @@ function TopContainer() {
 
   useEffect(() => {
     if (input.length > 0) {
-      const results = search.filter((item) =>
+      const results = searchItems.filter((item) =>
         item.title.toLowerCase().includes(input.toLowerCase())
       );
       setSearchResult(results);
@@ -106,18 +117,33 @@ function TopContainer() {
     }
   }, []);
 
-  const {theme, toggleTheme} = useContext(ThemeContext)
+  const { theme, toggleTheme } = useContext(ThemeContext);
+
+  const searchItems = [
+    { id: 1, title: "StockIT", image: Card1 },
+    { id: 2, title: "TakeNote", image: Card2 },
+    { id: 3, title: "TaRct", image: Card3 },
+    { id: 4, title: "To Do",  image: Card4 },
+    { id: 5, title: "ArchiTect",  image: Card5 },
+    { id: 6, title: "WeatherLy",  image: Card6 },
+    { id: 7, title: "Typing Test",  image: Card7 },
+    { id: 8, title: "Artisan",  image: Card8 },
+    { id: 9, title: "BBlocks",  image: Card9 },
+    { id: 10, title: "ZzShoes",  image: Card10 },
+    { id: 11, title: "SearchEngine",  image: Card11 },
+    { id: 12, title: "Alimage",  image: Card12 }
+  ];
 
   return (
     <div className="topContainer">
-      <button onClick={toggleTheme} className=" lightbutton">
-        {
-          theme === "dark" ? <FaSun/> : <FaMoon/>
-        }
-        </button>
+      <button onClick={toggleTheme} className="lightbutton">
+        {theme === "dark" ? <FaSun /> : <FaMoon />}
+      </button>
       <div className="navbar">
-        <div className="mobview ">
-          <div className="bars" onClick={toggleMenu}>{mobMenu?<FontAwesomeIcon icon={faTimes}/>:<FontAwesomeIcon icon={faBars} />}</div>
+        <div className="mobview">
+          <div className="bars" onClick={toggleMenu}>
+            {mobMenu ? <FontAwesomeIcon icon={faTimes} /> : <FontAwesomeIcon icon={faBars} />}
+          </div>
           <div id="shortview" className={mobMenu ? 'show' : ''}>
             <ul className={`${mobMenu ? "open" : "largeview"}`}>
               <li className="nav-item"><a href='/'><FontAwesomeIcon icon={faHome} /> Home</a></li>
@@ -145,16 +171,28 @@ function TopContainer() {
               onChange={(e) => setInput(e.target.value)}
             />
           </div>
-          
+
           {searchResult ? (
-            <div id="search_results">
+            <div id="search_results" style={{ color: 'white' }}>
               {searchResult.map((item, index) => (
                 <Link to={`/readmore/${item.id}`} key={index}>
                   <div>
-                    <p id="search_result_title" key={`title${index}`}>
+                    <img
+                      src={item.image}
+                      alt={item.title}
+                      style={{
+                        width: '200px',
+                        height: '80px',
+                        display: 'block',
+                        margin: '0 auto'
+                      }}
+                    />
+                    <p id="search_result_title" style={{ color: 'white' }} key={`title${index}`}>
                       {item.title}
                     </p>
-                    <span key={`category${index}`}>{item.category}</span>
+                    <span style={{ color: 'white' }} key={`category${index}`}>
+                      {item.category}
+                    </span>
                   </div>
                 </Link>
               ))}

diff --git a/src/Components/searchResults.js b/src/Components/searchResults.js
@@ -1,16 +1,31 @@
+import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
+import Card1 from "../img/card1.jpg";
+import Card2 from "../img/card2.jpg";
+import Card3 from "../img/card3.jpg";
+import Card4 from "../img/card4.jpg";
+import Card5 from "../img/card5.jpg";
+import Card6 from "../img/card6.jpg";
+import Card7 from "./projects/card7.png";
+import Card8 from "./projects/card8.png";
+import Card9 from "./projects/card9.png";
+import Card10 from "./projects/card10.png";
+import Card11 from "./projects/card11.png";
+import Card12 from "./projects/card12.png";
+
 const search = [
-    {id: 1, title: "StockIT", category: "Project" },
-    {id: 2, title: "TakeNote", category: "Project" },
-    {id: 3, title: "TaRct", category: "Project" },
-    {id: 4, title: "To Do", category: "Project" },
-    {id: 5, title: "ArchiTect", category: "Project" },
-    {id: 6, title: "WeatherLy", category: "Project" },
-    {id: 7, title: "Typing Test", category:"@JaneCooper" },
-    {id: 8, title: "Artisan", category:  "@ArieneMcCoy" },
-    {id: 9, title: "BBlocks", category: "@TheresaWebb" },
-    {id: 10,title: "ZzShoes", category: "@RalphEdwards" },
-    {id: 11,title: "SearchEngine", category: "@Raplhie" },
-    {id: 12, title: "Alimage" , category: "Project"}
-
+    {id: 1, title: "StockIT", category: "Project", image: Card1 },
+    {id: 2, title: "TakeNote", category: "Project", image: Card2 },
+    {id: 3, title: "TaRct", category: "Project", image: Card3 },
+    {id: 4, title: "To Do", category: "Project", image: Card4 },
+    {id: 5, title: "ArchiTect", category: "Project", image: Card5 },
+    {id: 6, title: "WeatherLy", category: "Project", image: Card6 },
+    {id: 7, title: "Typing Test", category:"@JaneCooper", image: Card7 },
+    {id: 8, title: "Artisan", category:  "@ArieneMcCoy", image: Card8 },
+    {id: 9, title: "BBlocks", category: "@TheresaWebb", image: Card9 },
+    {id: 10,title: "ZzShoes", category: "@RalphEdwards", image: Card10 },
+    {id: 11,title: "SearchEngine", category: "@Raplhie", image: Card11 },
+    {id: 12, title: "Alimage" , category: "Project", image: Card12 }
 ];
-export default search
+
+export default search;