Skip to content

Commit 343725d

Browse files
Hemu21Hemu21
committed
update
1 parent 69841ed commit 343725d

File tree

4 files changed

+199
-65
lines changed

4 files changed

+199
-65
lines changed

‎components/ProjectModal.js

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import {
2+
Modal,
3+
ModalBody,
4+
ModalCloseButton,
5+
ModalContent,
6+
ModalHeader,
7+
ModalOverlay,
8+
useDisclosure
9+
} from "@chakra-ui/react";
10+
import { faGitAlt, faYoutube } from "@fortawesome/free-brands-svg-icons";
11+
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
12+
import React from "react";
13+
const ProjectModal = ({ currProject }) => {
14+
const { isOpen, onOpen, onClose } = useDisclosure();
15+
// const [scrollBehavior, setScrollBehavior] = React.useState("inside");
16+
const btnRef = React.useRef();
17+
return (
18+
<div className="w-full absolute bottom-0">
19+
<button ref={btnRef} onClick={onOpen}
20+
className=" bg-[#00008B] bg-opacity-80 text-lg text-white dark:text-black font-medium py-1 hover:bg-opacity-100 rounded-b-2xl w-full"
21+
>
22+
👉🏻 Project Details
23+
</button>
24+
<Modal
25+
onClose={onClose}
26+
finalFocusRef={btnRef}
27+
isOpen={isOpen}
28+
scrollBehavior="inside"
29+
size="4xl"
30+
>
31+
<ModalOverlay />
32+
<ModalContent className="dark:bg-darkmode_gray-0 h-96">
33+
<ModalHeader className="flex items-center ">
34+
<a
35+
target="_blank"
36+
className="text-transparent bg-gradient-to-b from-[#66BFE6] to-[#00008B] bg-clip-text"
37+
rel="noreferrer"
38+
href={currProject.projectUrl}>
39+
{currProject.title}
40+
</a>
41+
<p className="ml-4 text-base text-[#00008B]">
42+
By {currProject.name}
43+
</p>
44+
</ModalHeader>
45+
<ModalCloseButton />
46+
<ModalBody>
47+
{/* <Lorem count={15} /> */}
48+
<div className="flex flex-row justify-between px-6">
49+
<a
50+
target="_blank"
51+
rel="noreferrer"
52+
href={currProject.projectUrl}
53+
>
54+
<div className="flex items-center bg-[#B9EEFF] px-2 rounded-md ">
55+
<img
56+
className="w-5 h-5"
57+
src="./WoB/gitlogo.png"
58+
/>
59+
<p className="ml-2 font-serif font-medium text-base text-justify text-[#00008B]">
60+
Repository Link
61+
</p>
62+
</div>
63+
</a>
64+
<div>
65+
<ModalCloseButton color="#00008B" />
66+
</div>
67+
</div>
68+
<div className="flex flex-col px-6 mt-5">
69+
<p className="text-[#00008B] font-semibold font-serif text-lg">
70+
Description
71+
</p>
72+
<p className="font-serif mt-4 text-base text-[#2371CD]">
73+
{currProject.description}
74+
</p>
75+
</div>
76+
{/* <p className="text-primary_orange-0 px-6 mt-5 font-semibold font-serif text-lg">
77+
Mentors
78+
</p>
79+
<div className="flex flex-row flex-wrap px-6 space-x-5 mt-5">
80+
{currProject.mentors_id.map((mentor, j) => {
81+
return (
82+
<a target="_blank" rel="noreferrer" href={mentor.github} key={j}>
83+
<Button
84+
key={j}
85+
size="sm"
86+
colorScheme="black"
87+
variant="outline"
88+
className="mb-2"
89+
>
90+
<FontAwesomeIcon
91+
className="w-5 h-5 text-black dark:text-white"
92+
icon={faGithub}
93+
size="2x"
94+
/>
95+
<p className="font-serif text-black font-light dark:text-white">
96+
{mentor.name}
97+
</p>
98+
</Button>
99+
</a>
100+
);
101+
})}
102+
</div> */}
103+
</ModalBody>
104+
</ModalContent>
105+
</Modal>
106+
</div>
107+
);
108+
};
109+
110+
export default ProjectModal;

‎pages/wobProject.js

+89-65
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,24 @@
11
import { Search2Icon } from "@chakra-ui/icons";
2-
import { Spacer } from "@chakra-ui/react";
2+
import { SimpleGrid, Spacer } from "@chakra-ui/react";
33
import Head from "next/head";
44
import React, { useEffect, useState } from "react";
5+
import ProjectModal from "../components/ProjectModal";
56

67
const Project = () => {
7-
const [projects, setProjects] = useState([]);
8-
const [filteredProjects, setFilteredProjects] = useState([]);
8+
const [data, setData] = useState([]);
9+
const [searchTerm, setSearchTerm] = useState("");
910
const [searchQuery, setSearchQuery] = useState("");
1011

1112
const getUsers = async (year) => {
1213
let url = `/WoB/projects/project${year}.json`;
1314
const response = await fetch(url);
1415
const projectData = await response.json();
15-
setProjects(projectData);
16-
setFilteredProjects(projectData); // Initialize filtered projects
16+
setData(projectData);
1717
};
1818

1919
useEffect(() => {
2020
getUsers("2024");
2121
}, []);
22-
23-
const handleSearch = (event) => {
24-
const query = event.target.value.toLowerCase();
25-
setSearchQuery(query);
26-
27-
const filtered = projects.filter((project) => {
28-
const titleMatch = project.title?.toLowerCase().includes(query);
29-
const tagsMatch = project.tags.some((tag) =>
30-
tag.toLowerCase().includes(query)
31-
);
32-
return titleMatch || tagsMatch;
33-
});
34-
35-
setFilteredProjects(filtered);
36-
};
37-
3822
return (
3923
<>
4024
<Head>
@@ -55,61 +39,101 @@ const Project = () => {
5539
<input
5640
className="px-3 py-1 bg-transparent outline-none dark:text-white text-black"
5741
type="search"
58-
placeholder="Search"
59-
value={searchQuery}
60-
onChange={handleSearch}
42+
placeholder="Search Projects....."
6143
name="search"
6244
id="search"
45+
onChange={(event) => setSearchTerm(event.target.value)}
6346
/>
6447
</div>
6548
</div>
6649
</div>
6750
<Spacer mt={16} />
68-
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-[90%] m-auto md:px-24">
69-
{filteredProjects.map((project, index) => (
70-
<div
71-
key={index}
72-
className="relative w-full max-w-[537px] h-[550px] bg-cover hover:shadow-xl hover:shadow-[#23A3CD] rounded-[50px] bg-center text-white"
73-
style={{ backgroundImage: "url('/WoB/projects_card.png')" }}
74-
>
75-
<a href={project.projectUrl}>
76-
<div className="absolute inset-0 rounded-[50px] bg-black bg-opacity-5 flex items-center justify-center">
77-
<div className="p-4 text-left w-[90%] m-auto text-[#00008B]">
78-
<div className="m-auto h-1/2">
79-
<h2 className="text-2xl text-center md:text-4xl my-6 font-bold">
80-
{project.title?.slice(0, 17)}
81-
{project.title[18] && "..."}
82-
</h2>
83-
<p className="text-lg md:text-xl mt-20 font-semibold">
84-
Project Admin:{" "}
85-
<span className="font-medium">
86-
{project.name?.slice(0, 15)}
87-
{project.name[15] && "..."}
88-
</span>
89-
</p>
90-
<p className="text-base md:text-lg mt-4 font-normal">
91-
{project.description?.slice(0, 120)}
92-
{project.description[121] && "..."}
93-
</p>
94-
</div>
95-
<div className="grid w-[95%] min-w-[235px] overflow-hidden m-auto grid-cols-2 md:grid-cols-3 gap-4 mt-5">
96-
{project.tags.map(
97-
(tag, idx) =>
98-
idx < 6 && (
99-
<p
100-
key={idx}
101-
className="w-[110px] h-[40px] text-center pt-[8px] text-white text-sm bg-[#00008B] rounded-tl-full rounded-br-full"
51+
<div
52+
className="flex flex-row justify-center flex-wrap items-center
53+
gap-x-10 gap-y-10 mt-9"
54+
>
55+
{data
56+
.sort(() => 0.5 - Math.random())
57+
.filter((curElem, i) => {
58+
if (searchTerm == "") return curElem;
59+
if (
60+
curElem.tags
61+
.join(",")
62+
.toLowerCase()
63+
.includes(searchTerm.toLowerCase()) ||
64+
curElem.title.toLowerCase().includes(searchTerm.toLowerCase())
65+
)
66+
return curElem;
67+
})
68+
.map((curElem, i) => {
69+
return (
70+
<div
71+
className="flex rounded-2xl relative bg-gradient-to-b from-[#00008B] to-[#85C6DC] items-center justify-between w-80"
72+
key={i}
73+
data-aos="flip-up"
74+
data-aos-duration="800"
75+
>
76+
<img className="absolute top-5 right-4 w-[66px] h-[63px]" src="./WoB/snow.png" />
77+
<img className="absolute top-24 right-4 w-[51px] h-[44px]" src="./WoB/snow.png" />
78+
<img className="absolute top-36 right-4 w-[34px] h-[34px]" src="./WoB/snow.png" />
79+
<img className="absolute bottom-28 right-4 w-[25px] h-[25px]" src="./WoB/snow.png" />
80+
<img className="absolute bottom-20 right-4 w-[19px] h-[17px]" src="./WoB/snow.png" />
81+
82+
<div className="shadow dark:bg-black rounded-lg">
83+
<div
84+
className="overflow-y-clip rounded-lg h-fit md:h-80
85+
w-80 flex flex-col justify-start
86+
shadow-lg shadow-black-200 relative"
87+
>
88+
<>
89+
<div className="flex flex-col justify-start gap-2 px-5 py-3">
90+
<div className="font-bold text-white md:text-xl">
91+
<a
92+
target="_blank"
93+
rel="noreferrer"
94+
href={curElem?.projectUrl}
10295
>
103-
{tag.split(" ")[0]}
104-
</p>
105-
)
106-
)}
96+
{curElem.title}
97+
</a>
98+
</div>
99+
<div className="mb-3 text-sm text-[#85C6DC] md:text-md md:mb-4">
100+
By {curElem.name}
101+
</div>
102+
</div>
103+
<SimpleGrid
104+
columns={{ sm: 2, md: 3 }}
105+
spacing={2}
106+
margin={1}
107+
className="px-2"
108+
>
109+
{curElem.tags
110+
.sort((a, b) => a.length - b.length)
111+
.map((techStk, k) => {
112+
return (
113+
techStk && (
114+
<button
115+
className="bg-[#E6F6FF] rounded-tl-md rounded-br-md w-full py-1
116+
text-[#00008B] drop-shadow-md "
117+
key={k}
118+
onClick={() => {
119+
setSearchTerm(techStk.trim());
120+
}}
121+
>
122+
{techStk.trim()}
123+
</button>
124+
)
125+
);
126+
})}
127+
</SimpleGrid>
128+
</>
129+
<br />
130+
<br />
131+
<ProjectModal currProject={curElem} />
107132
</div>
108133
</div>
109134
</div>
110-
</a>
111-
</div>
112-
))}
135+
);
136+
})}
113137
</div>
114138
<Spacer mt={16} />
115139
</section>

‎public/WoB/gitlogo.png

995 Bytes
Loading

‎public/WoB/snow.png

4.24 KB
Loading

0 commit comments

Comments
 (0)