Skip to content
Snippets Groups Projects
Commit 486584f3 authored by swostikpati's avatar swostikpati
Browse files

style draft 1 search

parent b0ce9db0
No related branches found
No related tags found
1 merge request!15Full text search implementation
Pipeline #391596 canceled
.search {
min-width: 320px;
}
.search .search-icon,
.search .close-icon {
height: 25px;
width: 25px;
margin-right: 30px;
cursor: pointer;
}
.search .search-icon {
margin-left: 245px;
}
.search .search-bar {
margin-right: 20px;
border: 0;
background-color: rgba(0, 0, 0, 0);
border-bottom: 1px solid var(--dark-blue);
outline: 0;
color: var(--dark-blue);
font: var(--primary-font);
}
.search .dropdown {
position: absolute;
min-width: 250px;
min-height: 100px;
overflow: auto;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
z-index: 10;
top: 90px;
right: 67px;
/* padding: 10px; */
border-radius: 10px;
background-color: var(--light-blue);
border: 1px solid rgba(255, 255, 255, 0.2);
}
......@@ -2,10 +2,12 @@
import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import pagesData from "../fullTextSearch";
import "./Search.css";
const Search = ({ pages = pagesData }) => {
const [query, setQuery] = useState("");
const [results, setResults] = useState([]);
const [searchButton, setSearchButton] = useState(true);
const navigate = useNavigate();
// If required we can later use a fuzzy matching algorithm like Levenshtein distance
......@@ -36,21 +38,42 @@ const Search = ({ pages = pagesData }) => {
navigate(page); // This navigates to the specified page using react-router-dom
};
return (
<div>
return searchButton ? (
// JSX for when searchButton is true
<div className="search">
<img
className="search-icon"
src="https://static.igem.wiki/teams/5125/search.png"
onClick={() => setSearchButton(false)}
></img>
</div>
) : (
// JSX for when searchButton is falses
<div className="search">
<input
className="search-bar"
type="text"
placeholder="Search..."
placeholder="Ask Coraline :)"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<ul>
{results.map((result, index) => (
<li key={index} onClick={() => handleResultClick(result.page)}>
{result.title}
</li>
))}
</ul>
<img
className="close-icon"
src="https://static.igem.wiki/teams/5125/close.png"
onClick={() => setSearchButton(true)}
/>
<div className="dropdown">
Check out:
<ul>
{results.map((result, index) => (
<li key={index} onClick={() => handleResultClick(result.page)}>
{result.title} &rarr;
{/* puts an arrow */}
</li>
))}
</ul>
</div>
</div>
);
};
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment