Skip to content

Commit d1c45a2

Browse files
vitorbarbosa123vitorbarbosa123
authored
Merge pull request #2 from renanbcunderline/home
merge home -> main
2 parents 1ca99b8 + 96bf862 commit d1c45a2

File tree

13 files changed

+407
-27
lines changed

13 files changed

+407
-27
lines changed

‎src/App.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import './css/App.css';
88
import UseScrollToTop from './hooks/useScrollToTop';
99

1010
const About = lazy(() => import('./pages/AboutMe'));
11+
const Events = lazy(() => import('./pages/Events'));
1112
const Contact = lazy(() => import('./pages/Contact.jsx'));
1213
const Home = lazy(() => import('./pages/Home'));
1314
const Projects = lazy(() => import('./pages/Projects'));
@@ -29,7 +30,7 @@ function App() {
2930
path="projects/single-project"
3031
element={<ProjectSingle />}
3132
/>
32-
33+
<Route path="events" element={<Events />} />
3334
<Route path="about" element={<About />} />
3435
<Route path="contact" element={<Contact />} />
3536
</Routes>

‎src/__tests__/Banner.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ function setupUserEvent(jsx) {
1616
test('it shows the title in the banner', () => {
1717
setup();
1818
// We expect that the title 'Hi, Iam Stoman' is in the banner component
19-
expect(screen.getByText(/Hi, Iam Stoman/i)).toBeInTheDocument();
19+
expect(screen.getByText(/FUNDAÇÃO COMP+/i)).toBeInTheDocument();
2020
});
2121

2222
test('can download cv when clicked on download cv button', async () => {

‎src/components/about/AboutMeBio.jsx‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,29 @@ const AboutMeBio = () => {
66
const { aboutMe } = useContext(AboutMeContext);
77

88
return (
9-
<div className="block sm:flex sm:gap-10 mt-10 sm:mt-20">
10-
<div className="w-full sm:w-1/4 mb-7 sm:mb-0">
11-
<img src={profileImage} className="rounded-lg w-96" alt="" />
9+
<section className="py-5 sm:py-10 mt-5 sm:mt-10">
10+
<div className="text-center">
11+
<p className="font-general-medium text-2xl sm:text-4xl mb-1 text-ternary-dark dark:text-ternary-light">
12+
Sobre Nós
13+
</p>
1214
</div>
15+
<div className="block sm:flex sm:gap-10 mt-10 sm:mt-20">
16+
<div className="w-full sm:w-1/4 mb-7 sm:mb-0">
17+
<img src={profileImage} className="rounded-lg w-96" alt="" />
18+
</div>
1319

14-
<div className="font-general-regular w-full sm:w-3/4 text-left">
15-
{aboutMe.map((bio) => (
16-
<p
17-
className="mb-4 text-ternary-dark dark:text-ternary-light text-lg"
18-
key={bio.id}
19-
>
20-
{bio.bio}
21-
</p>
22-
))}
20+
<div className="font-general-regular w-full sm:w-3/4 text-left">
21+
{aboutMe.map((bio) => (
22+
<p
23+
className="mb-4 text-ternary-dark dark:text-ternary-light text-lg"
24+
key={bio.id}
25+
>
26+
{bio.bio}
27+
</p>
28+
))}
29+
</div>
2330
</div>
24-
</div>
31+
</section>
2532
);
2633
};
2734

‎src/components/events/EventSingle.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { motion } from 'framer-motion';
2+
import { Link } from 'react-router-dom';
3+
4+
const EventSingle = ({ title, category, image }) => {
5+
return (
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+
}}
14+
>
15+
<Link to="/events/single-event" aria-label="Single Event">
16+
<div className="rounded-xl shadow-lg hover:shadow-xl cursor-pointer mb-10 sm:mb-0 bg-secondary-light dark:bg-ternary-dark">
17+
<div>
18+
<img
19+
src={image}
20+
className="rounded-t-xl border-none"
21+
alt="Single Event"
22+
/>
23+
</div>
24+
<div className="text-center px-4 py-6">
25+
<p className="font-general-medium text-lg md:text-xl text-ternary-dark dark:text-ternary-light mb-2">
26+
{title}
27+
</p>
28+
<span className="text-lg text-ternary-dark dark:text-ternary-light">
29+
{category}
30+
</span>
31+
</div>
32+
</div>
33+
</Link>
34+
</motion.div>
35+
);
36+
};
37+
38+
export default EventSingle;

‎src/components/events/EventsFilter.jsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const selectOptions = [
2+
'Web Application',
3+
'Mobile Application',
4+
'UI/UX Design',
5+
'Branding',
6+
];
7+
8+
const EventsFilter = ({ setSelectEvent }) => {
9+
return (
10+
<select
11+
onChange={(e) => {
12+
setSelectEvent(e.target.value);
13+
}}
14+
className="font-general-medium
15+
px-4
16+
sm:px-6
17+
py-2
18+
border
19+
dark:border-secondary-dark
20+
rounded-lg
21+
text-sm
22+
sm:text-md
23+
dark:font-medium
24+
bg-secondary-light
25+
dark:bg-ternary-dark
26+
text-primary-dark
27+
dark:text-ternary-light
28+
"
29+
>
30+
<option value={setSelectEvent} className="text-sm sm:text-md">
31+
All Events
32+
</option>
33+
34+
{selectOptions.map((option) => (
35+
<option className="text-normal sm:text-md" key={option}>
36+
{option}
37+
</option>
38+
))}
39+
</select>
40+
);
41+
};
42+
43+
export default EventsFilter;

‎src/components/events/EventsGrid.jsx‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
import { useContext } from 'react';
2+
import { FiSearch } from 'react-icons/fi';
3+
import EventSingle from './EventSingle';
4+
import { EventsContext } from '../../context/EventsContext';
5+
import EventsFilter from './EventsFilter';
6+
7+
const EventsGrid = () => {
8+
const {
9+
events,
10+
searchEvent,
11+
setSearchEvent,
12+
searchEventsByTitle,
13+
selectEvent,
14+
setSelectEvent,
15+
selectEventsByCategory,
16+
} = useContext(EventsContext);
17+
18+
return (
19+
<section className="py-5 sm:py-10 mt-5 sm:mt-10">
20+
<div className="text-center">
21+
<p className="font-general-medium text-2xl sm:text-4xl mb-1 text-ternary-dark dark:text-ternary-light">
22+
Eventos
23+
</p>
24+
</div>
25+
26+
<div className="mt-10 sm:mt-16">
27+
<h3
28+
className="font-general-regular
29+
text-center text-secondary-dark
30+
dark:text-ternary-light
31+
text-md
32+
sm:text-xl
33+
mb-3
34+
"
35+
>
36+
Search events by title or filter by category
37+
</h3>
38+
<div
39+
className="
40+
flex
41+
justify-between
42+
border-b border-primary-light
43+
dark:border-secondary-dark
44+
pb-3
45+
gap-3
46+
"
47+
>
48+
<div className="flex justify-between gap-2">
49+
<span
50+
className="
51+
hidden
52+
sm:block
53+
bg-primary-light
54+
dark:bg-ternary-dark
55+
p-2.5
56+
shadow-sm
57+
rounded-xl
58+
cursor-pointer
59+
"
60+
>
61+
<FiSearch className="text-ternary-dark dark:text-ternary-light w-5 h-5"></FiSearch>
62+
</span>
63+
<input
64+
onChange={(e) => {
65+
setSearchEvent(e.target.value);
66+
}}
67+
className="font-general-medium
68+
pl-3
69+
pr-1
70+
sm:px-4
71+
py-2
72+
border
73+
border-gray-200
74+
dark:border-secondary-dark
75+
rounded-lg
76+
text-sm
77+
sm:text-md
78+
bg-secondary-light
79+
dark:bg-ternary-dark
80+
text-primary-dark
81+
dark:text-ternary-light
82+
"
83+
id="name"
84+
name="name"
85+
type="search"
86+
required=""
87+
placeholder="Search Events"
88+
aria-label="Name"
89+
/>
90+
</div>
91+
92+
<EventsFilter setSelectEvent={setSelectEvent} />
93+
</div>
94+
</div>
95+
96+
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 mt-6 sm:gap-10">
97+
{selectEvent
98+
? selectEventsByCategory.map((event) => (
99+
<EventSingle
100+
title={event.title}
101+
category={event.category}
102+
image={event.img}
103+
key={event.id}
104+
/>
105+
))
106+
: searchEvent
107+
? searchEventsByTitle.map((event) => (
108+
<EventSingle
109+
title={event.title}
110+
category={event.category}
111+
image={event.img}
112+
key={event.id}
113+
/>
114+
))
115+
: events.map((event) => (
116+
<EventSingle
117+
title={event.title}
118+
category={event.category}
119+
image={event.img}
120+
key={event.id}
121+
/>
122+
))}
123+
</div>
124+
</section>
125+
);
126+
};
127+
128+
export default EventsGrid;

‎src/components/projects/ProjectsGrid.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const ProjectsGrid = () => {
1919
<section className="py-5 sm:py-10 mt-5 sm:mt-10">
2020
<div className="text-center">
2121
<p className="font-general-medium text-2xl sm:text-4xl mb-1 text-ternary-dark dark:text-ternary-light">
22-
Projects portfolio
22+
Programas
2323
</p>
2424
</div>
2525

‎src/components/shared/AppBanner.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ const AppBanner = () => {
2525
}}
2626
className="font-general-semibold text-2xl lg:text-3xl xl:text-4xl text-center sm:text-left text-ternary-dark dark:text-primary-light uppercase"
2727
>
28-
Hi, Iam Stoman
28+
FUNDAÇÃO COMP+
2929
</motion.h1>
3030
<motion.p
3131
initial={{ opacity: 0 }}
@@ -37,9 +37,9 @@ const AppBanner = () => {
3737
}}
3838
className="font-general-medium mt-4 text-lg md:text-xl lg:text-2xl xl:text-3xl text-center sm:text-left leading-normal text-gray-500 dark:text-gray-200"
3939
>
40-
A Full-Stack Developer & Design Enthusiast
40+
Impulsionando o avanço da computação através de pesquisa, educação e inovação.
4141
</motion.p>
42-
<motion.div
42+
{/* <motion.div
4343
initial={{ opacity: 0 }}
4444
animate={{ opacity: 1 }}
4545
transition={{
@@ -60,7 +60,7 @@ const AppBanner = () => {
6060
Download CV
6161
</span>
6262
</a>
63-
</motion.div>
63+
</motion.div> */}
6464
</div>
6565
<motion.div
6666
initial={{ opacity: 0, y: -180 }}

‎src/context/EventsContext.jsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { useState, createContext } from 'react';
2+
import { eventsData } from '../data/events';
3+
4+
// Create events context
5+
export const EventsContext = createContext();
6+
7+
// Create the events context provider
8+
export const EventsProvider = (props) => {
9+
const [events, setEvents] = useState(eventsData);
10+
const [searchEvent, setSearchEvent] = useState('');
11+
const [selectEvent, setSelectEvent] = useState('');
12+
13+
// Search events by event title
14+
const searchEventsByTitle = events.filter((item) => {
15+
const result = item.title
16+
.toLowerCase()
17+
.includes(searchEvent.toLowerCase())
18+
? item
19+
: searchEvent === ''
20+
? item
21+
: '';
22+
return result;
23+
});
24+
25+
// Select events by event category
26+
const selectEventsByCategory = events.filter((item) => {
27+
let category =
28+
item.category.charAt(0).toUpperCase() + item.category.slice(1);
29+
return category.includes(selectEvent);
30+
});
31+
32+
return (
33+
<EventsContext.Provider
34+
value={{
35+
events,
36+
setEvents,
37+
searchEvent,
38+
setSearchEvent,
39+
searchEventsByTitle,
40+
selectEvent,
41+
setSelectEvent,
42+
selectEventsByCategory,
43+
}}
44+
>
45+
{props.children}
46+
</EventsContext.Provider>
47+
);
48+
};

0 commit comments

Comments
 (0)