Skip to content

Commit 1d26c98

Browse files
Ronak-23Ronak-23
committed
2 parents b2c55ea + 6f2b318 commit 1d26c98

File tree

8 files changed

+28067
-13427
lines changed

8 files changed

+28067
-13427
lines changed

‎frontend/family_tree/package-lock.json

Lines changed: 27621 additions & 13149 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: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,18 @@
33
"version": "0.1.0",
44
"private": true,
55
"dependencies": {
6+
"@emotion/react": "^11.4.1",
7+
"@emotion/styled": "^11.3.0",
68
"@material-ui/core": "^4.12.3",
79
"@material-ui/icons": "^4.11.2",
10+
"@mui/material": "^5.0.1",
811
"@testing-library/jest-dom": "^5.14.1",
912
"@testing-library/react": "^11.2.7",
1013
"@testing-library/user-event": "^12.8.3",
1114
"@tippyjs/react": "^4.2.5",
1215
"react": "^17.0.2",
1316
"react-dom": "^17.0.2",
14-
"react-scripts": "4.0.3",
17+
"react-scripts": "^1.1.5",
1518
"web-vitals": "^1.1.2"
1619
},
1720
"scripts": {

‎frontend/family_tree/src/App.css

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
display: flex;
55
align-items: center;
66
flex-direction: column;
7-
/* background-image: linear-gradient(90deg, #8820dd, orange); */
87
}
98

109
.help {
@@ -47,4 +46,4 @@
4746
margin-right: 10px;
4847
width: 150px;
4948
height: 170px;
50-
}
49+
}

‎frontend/family_tree/src/App.js

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,44 @@ import './App.css';
33
import Help from './Components/Help.js';
44
import SearchBar from "./Components/SearchBar";
55
import StudentData from "./Data.json";
6+
import PCard from "./Components/ProfileCard.js";
7+
import { ThemeProvider, createTheme } from "@material-ui/core";
68

79
function App() {
10+
11+
const theme = createTheme({
12+
palette: {
13+
primary: {
14+
main: "#2a4158"
15+
}
16+
}
17+
});
18+
19+
const x = StudentData[0];
20+
821
return (
22+
<ThemeProvider theme={theme}>
923
<div className="App">
10-
<SearchBar placeholder="Enter the Name or Roll Number..." data={StudentData} />
24+
<SearchBar placeholder="Enter the Name or Roll Number..." studentData={StudentData} />
1125
<div className="help">
1226
<Help />
1327
</div>
28+
29+
<PCard
30+
id={x.student.id}
31+
branch={x.student.branch}
32+
name={x.student.name}
33+
year={x.student.year}
34+
email={x.student.email}
35+
picture={x.student.picture}
36+
linkedIn={x.student.linkedIn}
37+
hometown={x.student.hometown}
38+
coCurriculars={x.student.coCurriculars}
39+
socialMedia={x.student.socialMedia}
40+
/>
41+
1442
</div>
43+
</ThemeProvider>
1544
);
1645
}
1746

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

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
import React from "react";
2+
import {
3+
Typography,
4+
Card,
5+
CardActions,
6+
CardContent,
7+
Link,
8+
IconButton,
9+
makeStyles
10+
} from "@material-ui/core";
11+
import Box from "@mui/material/Box";
12+
import CloseOutlinedIcon from "@material-ui/icons/CloseOutlined";
13+
import MailIcon from "@material-ui/icons/Mail";
14+
import LocationOnIcon from "@material-ui/icons/LocationOn";
15+
import InstagramIcon from "@material-ui/icons/Instagram";
16+
import LinkedInIcon from "@material-ui/icons/LinkedIn";
17+
import GitHubIcon from "@material-ui/icons/GitHub";
18+
import FacebookIcon from "@material-ui/icons/Facebook";
19+
import TwitterIcon from "@material-ui/icons/Twitter";
20+
import { Avatar, Divider } from "@mui/material";
21+
22+
const useStyles = makeStyles((theme) => ({
23+
root: {
24+
borderRadius: "1rem",
25+
width: "20rem",
26+
boxShadow: "0 8px 32px 0 rgba( 31, 38, 135, 0.37 )",
27+
border: "1px solid rgba( 255, 255, 255, 0.18 )",
28+
position: "fixed",
29+
right: "20px",
30+
bottom: "20px",
31+
},
32+
33+
socialMediaButton: {
34+
opacity: 0.9,
35+
transition: "0.2s",
36+
37+
"&:hover": {
38+
opacity: "1",
39+
transform: "translate(0,-5px)",
40+
background: "rgba(255,255,255,0.5)"
41+
}
42+
}
43+
}));
44+
45+
function PCard(props) {
46+
const classes = useStyles();
47+
48+
return (
49+
<React.Fragment>
50+
<Card className={classes.root} variant="outlined">
51+
<Box sx={{ display: "flex", justifyContent: "right" }}>
52+
<IconButton aria-label="close">
53+
<CloseOutlinedIcon />
54+
</IconButton>
55+
</Box>
56+
<Box
57+
sx={{
58+
display: "flex",
59+
alignItems: "center",
60+
justifyContent: "center",
61+
flexGrow: 1,
62+
marginTop: "-1.5rem",
63+
marginBottom: "0.5rem"
64+
}}
65+
>
66+
<Avatar
67+
alt={props.name}
68+
src={props.picture}
69+
sx={{
70+
width: "10rem",
71+
height: "10rem",
72+
mt: 1,
73+
filter: "drop-shadow(1px 1px 4px #444444)"
74+
}}
75+
/>
76+
</Box>
77+
78+
<CardContent>
79+
<Typography gutterBottom={true}>
80+
<Box sx={{ fontSize: "large", color: "#2a4158", textAlign:"center" }}>
81+
{props.name}
82+
</Box>
83+
84+
</Typography>
85+
<Typography gutterBottom={true}>
86+
<Box sx={{ color: "#597387", textAlign:"center" }}>
87+
{props.branch}-{props.year}
88+
</Box>
89+
</Typography>
90+
91+
{props.hometown && (
92+
<Typography>
93+
<Box
94+
sx={{
95+
display: "flex",
96+
justifyContent: "center",
97+
fontWeight: "medium",
98+
color: "#597387"
99+
}}
100+
>
101+
<LocationOnIcon color="primary" />
102+
{props.hometown}
103+
</Box>
104+
</Typography>
105+
)}
106+
107+
{props.coCurriculars[0] && (
108+
<React.Fragment>
109+
<br />
110+
<Divider variant="middle" />
111+
<br />
112+
<Box sx={{ color: "#2a4158" ,textAlign:"center"}}>
113+
{props.coCurriculars.map((item) => (
114+
<Typography variant="body2" key={item} gutterBottom>
115+
{item}
116+
</Typography>
117+
))}
118+
</Box>
119+
</React.Fragment>
120+
)}
121+
</CardContent>
122+
<Divider variant="middle" />
123+
<Box
124+
sx={{
125+
display: "flex",
126+
justifyContent: "space-evenly",
127+
flexWrap: "wrap"
128+
}}
129+
>
130+
<CardActions>
131+
{props.email && (
132+
<Link href={`mailto:${props.email}`}>
133+
<IconButton className={classes.socialMediaButton}>
134+
<MailIcon color="primary" />
135+
</IconButton>
136+
</Link>
137+
)}
138+
139+
{props.linkedIn && (
140+
<Link href={props.linkedIn} target="_blank">
141+
<IconButton
142+
aria-label="linkedin"
143+
className={classes.socialMediaButton}
144+
>
145+
<LinkedInIcon color="primary" />
146+
</IconButton>
147+
</Link>
148+
)}
149+
150+
{props.socialMedia && props.socialMedia.insta && (
151+
<Link href={props.socialMedia.insta} target="_blank">
152+
<IconButton
153+
aria-label="instagram"
154+
className={classes.socialMediaButton}
155+
>
156+
<InstagramIcon color="primary" />
157+
</IconButton>
158+
</Link>
159+
)}
160+
161+
{props.socialMedia && props.socialMedia.github && (
162+
<Link href={props.socialMedia.github} target="_blank">
163+
<IconButton
164+
aria-label="github"
165+
className={classes.socialMediaButton}
166+
>
167+
<GitHubIcon color="primary" />
168+
</IconButton>
169+
</Link>
170+
)}
171+
172+
{props.socialMedia && props.socialMedia.facebook && (
173+
<Link href={props.socialMedia.facebook} target="_blank">
174+
<IconButton
175+
aria-label="facebook"
176+
className={classes.socialMediaButton}
177+
>
178+
<FacebookIcon color="primary" />
179+
</IconButton>
180+
</Link>
181+
)}
182+
183+
{props.socialMedia && props.socialMedia.twitter && (
184+
<Link href={props.socialMedia.twitter} target="_blank">
185+
<IconButton
186+
aria-label="twitter"
187+
className={classes.socialMediaButton}
188+
>
189+
<TwitterIcon color="primary" />
190+
</IconButton>
191+
</Link>
192+
)}
193+
</CardActions>
194+
</Box>
195+
</Card>
196+
</React.Fragment>
197+
);
198+
}
199+
200+
export default PCard;

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

Lines changed: 12 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,26 @@
11
import React, { useState } from "react";
2-
import "./SearchBar.css";
2+
import "../Styles/SearchBar.css";
33
import SearchIcon from "@material-ui/icons/Search";
44
import CloseIcon from "@material-ui/icons/Close"
55

6-
function SearchBar({ placeholder, data }) {
6+
function SearchBar({ placeholder, studentData }) {
77
const [filteredData, setFilteredData] = useState([]);
88
const [wordEntered, setWordEntered] = useState("");
99

1010
const handleFilter = (event) => {
1111
const searchWord = event.target.value;
1212
setWordEntered(searchWord);
13-
const newFilter = data.filter((value) => {
14-
return value.title.toLowerCase().includes(searchWord.toLowerCase());
15-
});
16-
1713
if (searchWord.length < 3) {
1814
setFilteredData([]);
1915
} else {
20-
setFilteredData(newFilter);
16+
const filteredResults = studentData.filter((query) => {
17+
return query.student.name.toLowerCase().includes(searchWord.toLowerCase()) + query.student.id.toLowerCase().includes(searchWord.toLowerCase());
18+
});
19+
setFilteredData(filteredResults);
2120
}
2221
};
2322

24-
const clearInput = () => {
23+
const clearState = () => {
2524
setFilteredData([]);
2625
setWordEntered("");
2726
};
@@ -36,20 +35,18 @@ function SearchBar({ placeholder, data }) {
3635
onChange={handleFilter}
3736
/>
3837
<div className="searchIcon">
39-
{filteredData.length === 0 ? (
38+
{wordEntered.length === 0 ? (
4039
<SearchIcon />
4140
) : (
42-
<CloseIcon id="clearBtn" onClick={clearInput} />
41+
<CloseIcon id="clearBtn" onClick={clearState} />
4342
)}
4443
</div>
4544
</div>
46-
{filteredData.length != 0 && (
45+
{filteredData.length !== 0 && (
4746
<div className="dataResult">
48-
{filteredData.slice(0, 5).map((value, key) => {
47+
{filteredData.slice(0, 5).map((value) => {
4948
return (
50-
<a className="dataItem" href={value.link} target="_blank">
51-
<p>{value.title} </p>
52-
</a>
49+
<p className="dataItem">{`${value.student.name} (${value.student.id})`} </p>
5350
);
5451
})}
5552
</div>

0 commit comments

Comments
 (0)