From 8f0aba717eba991a72d82a58aac8f0b319c4eaaa Mon Sep 17 00:00:00 2001 From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com> Date: Fri, 9 Aug 2024 23:38:44 +0530 Subject: [PATCH] Improve features on search results --- src/Components/TopContainer.css | 4 ++ src/Components/TopContainer.js | 72 +++++++++++++++++++++++++-------- src/Components/searchResults.js | 43 +++++++++++++------- 3 files changed, 88 insertions(+), 31 deletions(-) diff --git a/src/Components/TopContainer.css b/src/Components/TopContainer.css index 03be7e2a..f197f1cb 100644 --- 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 index 305e6b3c..82eeee98 100644 --- 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 (
- +
-
-
{mobMenu?:}
+
+
+ {mobMenu ? : } +
  • Home
    • @@ -145,16 +171,28 @@ function TopContainer() { onChange={(e) => setInput(e.target.value)} />
- + {searchResult ? ( -
+
{searchResult.map((item, index) => (
-

+ {item.title} +

{item.title}

- {item.category} + + {item.category} +
))} diff --git a/src/Components/searchResults.js b/src/Components/searchResults.js index 19b9dac7..e1ffa52b 100644 --- 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 \ No newline at end of file + +export default search;