Skip to content

Commit 845e29a

Browse files
Dev-GoelDev-Goel
committed
Created Search Field Component
1 parent d456c1f commit 845e29a

File tree

8 files changed

+719
-21445
lines changed

8 files changed

+719
-21445
lines changed

‎frontend/family_tree/package-lock.json

Lines changed: 312 additions & 21442 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/family_tree/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@material-ui/core": "^4.12.3",
7+
"@material-ui/icons": "^4.11.2",
68
"@testing-library/jest-dom": "^5.14.1",
79
"@testing-library/react": "^11.2.7",
810
"@testing-library/user-event": "^12.8.3",

‎frontend/family_tree/public/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>Family Tree IITJ</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎frontend/family_tree/src/App.css

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,17 @@
11
.App {
2-
text-align: center;
2+
width: 100vw;
3+
height: 100vh;
4+
display: flex;
5+
align-items: center;
6+
flex-direction: column;
7+
/* background-image: linear-gradient(90deg, #8820dd, orange); */
38
}
49

510
.help {
6-
text-align: right;
11+
margin-top: 20px;
12+
position: absolute;
13+
right: 20px;
14+
display: flex;
715
}
816

917
.helpbutton {

‎frontend/family_tree/src/App.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1+
import React from "react";
12
import './App.css';
23
import Help from './Components/Help.js';
4+
import SearchBar from "./Components/SearchBar";
5+
import StudentData from "./Data.json";
36

47
function App() {
58
return (
69
<div className="App">
10+
<SearchBar placeholder="Enter the Name or Roll Number..." data={StudentData} />
711
<div className="help">
812
<Help />
913
</div>

‎frontend/family_tree/src/Components/SearchBar.css

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.searchInputs {
2+
margin-top: 20px;
3+
position: absolute;
4+
left: 20px;
5+
display: flex;
6+
}
7+
8+
.search input {
9+
background-color: white;
10+
border: 2px solid black;
11+
border-radius: 2px;
12+
border-right: 0px;
13+
border-top-right-radius: 0px;
14+
border-bottom-right-radius: 0px;
15+
font-size: 18px;
16+
padding: 15px;
17+
height: 30px;
18+
width: 300px;
19+
}
20+
21+
.searchIcon {
22+
border: 2px solid black;
23+
border-left: 0px;
24+
height: 60px;
25+
width: 50px;
26+
background-color: white;
27+
display: grid;
28+
place-items: center;
29+
}
30+
31+
input:focus {
32+
outline: none;
33+
}
34+
.searchIcon svg {
35+
font-size: 35px;
36+
}
37+
38+
.dataResult {
39+
margin-top: 90px;
40+
position: absolute;
41+
left: 20px;
42+
width: 340px;
43+
height: 250px;
44+
background-color: white;
45+
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
46+
overflow: hidden;
47+
overflow-y: auto;
48+
}
49+
50+
.dataResult::-webkit-scrollbar {
51+
display: none;
52+
}
53+
54+
.dataResult .dataItem {
55+
width: 100%;
56+
height: 50px;
57+
display: flex;
58+
align-items: center;
59+
color: black;
60+
}
61+
62+
.dataItem p {
63+
margin-left: 10px;
64+
}
65+
a {
66+
text-decoration: none;
67+
}
68+
69+
a:hover {
70+
background-color: lightgrey;
71+
}
72+
73+
#clearBtn {
74+
cursor: pointer;
75+
}

‎frontend/family_tree/src/Components/SearchBar.js

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { useState } from "react";
2+
import "./SearchBar.css";
3+
import SearchIcon from "@material-ui/icons/Search";
4+
import CloseIcon from "@material-ui/icons/Close"
5+
6+
function SearchBar({ placeholder, data }) {
7+
const [filteredData, setFilteredData] = useState([]);
8+
const [wordEntered, setWordEntered] = useState("");
9+
10+
const handleFilter = (event) => {
11+
const searchWord = event.target.value;
12+
setWordEntered(searchWord);
13+
const newFilter = data.filter((value) => {
14+
return value.title.toLowerCase().includes(searchWord.toLowerCase());
15+
});
16+
17+
if (searchWord.length < 3) {
18+
setFilteredData([]);
19+
} else {
20+
setFilteredData(newFilter);
21+
}
22+
};
23+
24+
const clearInput = () => {
25+
setFilteredData([]);
26+
setWordEntered("");
27+
};
28+
29+
return (
30+
<div className="search">
31+
<div className="searchInputs">
32+
<input
33+
type="text"
34+
placeholder={placeholder}
35+
value={wordEntered}
36+
onChange={handleFilter}
37+
/>
38+
<div className="searchIcon">
39+
{filteredData.length === 0 ? (
40+
<SearchIcon />
41+
) : (
42+
<CloseIcon id="clearBtn" onClick={clearInput} />
43+
)}
44+
</div>
45+
</div>
46+
{filteredData.length != 0 && (
47+
<div className="dataResult">
48+
{filteredData.slice(0, 5).map((value, key) => {
49+
return (
50+
<a className="dataItem" href={value.link} target="_blank">
51+
<p>{value.title} </p>
52+
</a>
53+
);
54+
})}
55+
</div>
56+
)}
57+
</div>
58+
);
59+
}
60+
61+
export default SearchBar;

0 commit comments

Comments
 (0)