Skip to content

Commit a0d09ef

Browse files
realstomanrealstoman
authored
Merge pull request realstoman#11 from realstoman/filter-and-search-functionality
Filter and search functionality and animations
2 parents 2b5f87b + 8577988 commit a0d09ef

21 files changed

+722
-550
lines changed

‎src/App.js‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,27 +8,30 @@ import Contact from './pages/Contact';
88
import Home from './pages/Home';
99
import Projects from './pages/Projects';
1010
import ProjectSingle from './pages/ProjectSingle';
11+
import { AnimatePresence } from 'framer-motion';
1112

1213
function App() {
1314
return (
14-
<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
15-
<Router>
16-
<ScrollToTop />
17-
<AppHeader />
18-
<Routes>
19-
<Route path="/" element={<Home />} />
20-
<Route path="projects" element={<Projects />} />
21-
<Route
22-
path="projects/single-project"
23-
element={<ProjectSingle />}
24-
/>
15+
<AnimatePresence>
16+
<div className=" bg-secondary-light dark:bg-primary-dark transition duration-300">
17+
<Router>
18+
<ScrollToTop />
19+
<AppHeader />
20+
<Routes>
21+
<Route path="/" element={<Home />} />
22+
<Route path="projects" element={<Projects />} />
23+
<Route
24+
path="projects/single-project"
25+
element={<ProjectSingle />}
26+
/>
2527

26-
<Route path="about" element={<About />} />
27-
<Route path="contact" element={<Contact />} />
28-
</Routes>
29-
<AppFooter />
30-
</Router>
31-
</div>
28+
<Route path="about" element={<About />} />
29+
<Route path="contact" element={<Contact />} />
30+
</Routes>
31+
<AppFooter />
32+
</Router>
33+
</div>
34+
</AnimatePresence>
3235
);
3336
}
3437

‎src/components/HireMeModal.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,14 @@
1+
import { motion } from 'framer-motion';
12
import { FiX } from 'react-icons/fi';
23

34
const HireMeModal = ({ onClose, onRequest }) => {
45
return (
5-
<div className="fixed inset-0 z-30 transition-all duration-500">
6+
<motion.div
7+
initial={{ opacity: 0 }}
8+
animate={{ opacity: 1 }}
9+
exit={{ opacity: 0 }}
10+
className="fixed inset-0 z-30 transition-all duration-500"
11+
>
612
{/* Modal Background */}
713
<div className="bg-filter bg-black bg-opacity-50 fixed inset-0 w-full h-full z-20"></div>
814

@@ -119,7 +125,7 @@ const HireMeModal = ({ onClose, onRequest }) => {
119125
</div>
120126
</div>
121127
</main>
122-
</div>
128+
</motion.div>
123129
);
124130
};
125131

‎src/components/about/AboutCounter.js‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
const AboutCounter = () => {
22
return (
33
<div className="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">
4-
<div className="container mx-auto py-20 block sm:flex sm:justify-between sm:items-center">
4+
<div className="container mx-auto py-20 block sm:flex sm:justify-between items-center">
55
<div className="mb-20 sm:mb-0">
6-
<h2 className="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2">
6+
<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
77
12
88
</h2>
9-
<span className="block text-md text-ternary-dark dark:text-ternary-light">
9+
<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
1010
Years of experience
1111
</span>
1212
</div>
1313

1414
<div className="mb-20 sm:mb-0">
15-
<h2 className="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2">
15+
<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
1616
20k+
1717
</h2>
18-
<span className="block text-md text-ternary-dark dark:text-ternary-light">
18+
<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
1919
Stars on GitHub
2020
</span>
2121
</div>
2222

2323
<div className="mb-20 sm:mb-0">
24-
<h2 className="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2">
24+
<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
2525
92%
2626
</h2>
27-
<span className="block text-md text-ternary-dark dark:text-ternary-light">
27+
<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
2828
Positive feedback
2929
</span>
3030
</div>
3131

3232
<div className="mb-20 sm:mb-0">
33-
<h2 className="text-4xl font-bold text-secondary-dark dark:text-secondary-light mb-2">
33+
<h2 className="text-4xl text-center font-bold text-secondary-dark dark:text-secondary-light mb-2">
3434
77
3535
</h2>
36-
<span className="block text-md text-ternary-dark dark:text-ternary-light">
36+
<span className="block text-md text-center text-ternary-dark dark:text-ternary-light">
3737
Projects completed
3838
</span>
3939
</div>

‎src/components/contact/ContactDetails.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const contacts = [
2020

2121
const ContactDetails = () => {
2222
return (
23-
<div className="w-full sm:w-1/2">
23+
<div className="w-full lg:w-1/2">
2424
<div className="text-left max-w-xl px-6">
2525
<h2 className="text-2xl text-primary-dark dark:text-primary-light font-semibold mt-12 mb-8">
2626
Contact details

‎src/components/contact/ContactForm.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
const ContactForm = () => {
22
return (
3-
<div className="w-full sm:w-1/2">
3+
<div className="w-full lg:w-1/2">
44
<div className="leading-loose">
55
<form
66
onSubmit={(e) => {

‎src/components/projects/ProjectSingle.js‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,39 @@
1+
import { motion } from 'framer-motion';
12
import { Link } from 'react-router-dom';
23

34
const ProjectSingle = ({ title, category, image }) => {
45
return (
5-
<Link
6-
to="/projects/single-project"
7-
className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
8-
aria-label="Single Project"
6+
<motion.div
7+
initial={{ opacity: 0 }}
8+
animate={{ opacity: 1, delay: 1 }}
9+
transition={{
10+
ease: 'easeInOut',
11+
duration: 0.7,
12+
delay: 0.15,
13+
}}
914
>
10-
<div>
11-
<img
12-
src={image}
13-
className="rounded-t-xl border-none"
14-
alt="Single Project"
15-
/>
16-
</div>
17-
<div className="text-center px-4 py-6">
18-
<p className="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2">
19-
{title}
20-
</p>
21-
<span className="text-lg text-ternary-dark dark:text-ternary-light">
22-
{category}
23-
</span>
24-
</div>
25-
</Link>
15+
<Link
16+
to="/projects/single-project"
17+
className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark"
18+
aria-label="Single Project"
19+
>
20+
<div>
21+
<img
22+
src={image}
23+
className="rounded-t-xl border-none"
24+
alt="Single Project"
25+
/>
26+
</div>
27+
<div className="text-center px-4 py-6">
28+
<p className="text-2xl text-ternary-dark dark:text-ternary-light font-semibold mb-2">
29+
{title}
30+
</p>
31+
<span className="text-lg text-ternary-dark dark:text-ternary-light">
32+
{category}
33+
</span>
34+
</div>
35+
</Link>
36+
</motion.div>
2637
);
2738
};
2839

‎src/components/projects/ProjectsFilter.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,12 @@ const selectOptions = [
55
'Branding',
66
];
77

8-
const ProjectsFilter = () => {
8+
const ProjectsFilter = ({ setSelectProject }) => {
99
return (
1010
<select
11+
onChange={(e) => {
12+
setSelectProject(e.target.value);
13+
}}
1114
className="
1215
px-4
1316
sm:px-6
@@ -24,7 +27,7 @@ const ProjectsFilter = () => {
2427
dark:text-ternary-light
2528
"
2629
>
27-
<option value className="text-sm sm:text-md">
30+
<option value={setSelectProject} className="text-sm sm:text-md">
2831
All Projects
2932
</option>
3033

‎src/components/projects/ProjectsGrid.js‎

Lines changed: 61 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,34 +3,40 @@ import { FiSearch } from 'react-icons/fi';
33
import ProjectSingle from './ProjectSingle';
44
import { ProjectsContext } from '../../context/ProjectsContext';
55
import ProjectsFilter from './ProjectsFilter';
6+
import { motion } from 'framer-motion';
67

78
const ProjectsGrid = () => {
8-
const [projects, setProjects] = useContext(ProjectsContext);
9+
const {
10+
projects,
11+
searchProject,
12+
setSearchProject,
13+
searchProjectsByTitle,
14+
selectProject,
15+
setSelectProject,
16+
selectProjectsByCategory,
17+
} = useContext(ProjectsContext);
918

10-
// const selectedProject = '';
11-
// const searchProject = '';
12-
13-
// const filteredProjects = () => {
14-
// if (selectedProject) {
15-
// return filterProjectsByCategory();
16-
// } else if (searchProject) {
17-
// return filterProjectsBySearch();
18-
// }
19-
// return ProjectsData;
20-
// };
21-
22-
// const filterProjectsByCategory = () => {
23-
// return ProjectsData.filter((item) => {
24-
// let category =
25-
// item.category.charAt(0).toUpperCase() + item.category.slice(1);
26-
// return category.includes(selectedProject);
27-
// });
28-
// };
29-
30-
// const filterProjectsBySearch = () => {
31-
// let project = new RegExp(searchProject, 'i');
32-
// return ProjectsData.filter((el) => el.title.match(project));
33-
// };
19+
const projectsResult = () => {
20+
if (setSearchProject) {
21+
return searchProjectsByTitle.map((project) => (
22+
<ProjectSingle
23+
title={project.title}
24+
category={project.category}
25+
image={project.img}
26+
key={project.id}
27+
/>
28+
));
29+
} else if (setSelectProject) {
30+
return selectProjectsByCategory.map((project) => (
31+
<ProjectSingle
32+
title={project.title}
33+
category={project.category}
34+
image={project.img}
35+
key={project.id}
36+
/>
37+
));
38+
}
39+
};
3440

3541
return (
3642
<section className="py-5 sm:py-10 mt-5 sm:mt-10">
@@ -86,6 +92,9 @@ const ProjectsGrid = () => {
8692
<FiSearch className="text-ternary-dark dark:text-ternary-light w-5 h-5"></FiSearch>
8793
</span>
8894
<input
95+
onChange={(e) => {
96+
setSearchProject(e.target.value);
97+
}}
8998
className="
9099
pl-3
91100
pr-1
@@ -112,22 +121,40 @@ const ProjectsGrid = () => {
112121
</div>
113122
{/* <ProjectsFilter @change="selectedProject = $event" /> */}
114123

115-
<ProjectsFilter />
124+
<ProjectsFilter setSelectProject={setSelectProject} />
116125
{/* <p>Filter projects</p> */}
117126
</div>
118127
</div>
119128
{/* Filter and search projects end */}
120129

121130
{/* Projects grid start */}
122131
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
123-
{projects.map((project) => (
124-
<ProjectSingle
125-
title={project.title}
126-
category={project.category}
127-
image={project.img}
128-
key={project.id}
129-
/>
130-
))}
132+
{selectProject
133+
? selectProjectsByCategory.map((project) => (
134+
<ProjectSingle
135+
title={project.title}
136+
category={project.category}
137+
image={project.img}
138+
key={project.id}
139+
/>
140+
))
141+
: searchProject
142+
? searchProjectsByTitle.map((project) => (
143+
<ProjectSingle
144+
title={project.title}
145+
category={project.category}
146+
image={project.img}
147+
key={project.id}
148+
/>
149+
))
150+
: projects.map((project) => (
151+
<ProjectSingle
152+
title={project.title}
153+
category={project.category}
154+
image={project.img}
155+
key={project.id}
156+
/>
157+
))}
131158
</div>
132159
{/* Projects grid end */}
133160
</section>

0 commit comments

Comments
 (0)