Skip to content

Commit 3098008

Browse files
mariana-caldasmariana-caldas
authored
Merge pull request #145 from Web-Dev-Path/refactor/card-columns
Refactor CardColumns to Accept and array of card objects as props
2 parents 6461d76 + d300e89 commit 3098008

File tree

7 files changed

+76
-87
lines changed

7 files changed

+76
-87
lines changed

‎CHANGELOG.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
7171
- updated 'about us' section (our goals, our purpose)
7272
- updated mobile nav to automatically close when page route change is completed
7373
- adjust flex-basis of a few sections in the about page to better match the design file
74-
74+
- removed unused import and comments from development stage
7575

7676

7777
### Updated
@@ -80,5 +80,6 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
8080
- .env-template to include SENDGRID_API_KEY
8181
- fixed next.js warning - no stylesheets in head component
8282
(added _document.js and moved google fonts into _document.js)
83+
- refactor CardColumns to accept an array of card objects as props
8384

8485

‎components/ContactUsCards.js

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,38 @@ import contactCardStyles from '@/styles/ContactUsCards.module.scss';
22
import CardsColumns from './containers/CardsColumns';
33
import RevealContentContainer from './containers/RevealContentContainer';
44

5+
const cards = [
6+
{
7+
title: 'FAQ',
8+
image: '/images/svg/faq-icon.svg',
9+
altTag: 'FAQ',
10+
content: 'You can find the main questions about the project.',
11+
link: 'https://github.com/Web-Dev-Path/web-dev-path/wiki/FAQ',
12+
linkText: 'Our FAQ',
13+
},
14+
{
15+
title: 'Blog',
16+
image: '/images/svg/blog-icon.svg',
17+
altTag: 'Blog',
18+
content: 'You can share your projects and ideas to all our community.',
19+
link: '/blog',
20+
linkText: 'Our Blog',
21+
},
22+
{
23+
title: 'Repository',
24+
image: '/images/svg/repository-icon.svg',
25+
altTag: 'Repository',
26+
content: 'You can see most used codes, guidelines and more.',
27+
link: 'https://github.com/Web-Dev-Path/web-dev-path',
28+
linkText: 'Our Repository',
29+
},
30+
];
31+
532
export default function ContactUsCards() {
633
return (
734
<div className={contactCardStyles.contactCards}>
835
<RevealContentContainer>
9-
<CardsColumns
10-
titles={['FAQ', 'Blog', 'Repository']}
11-
images={[
12-
'/images/svg/faq-icon.svg',
13-
'/images/svg/blog-icon.svg',
14-
'/images/svg/repository-icon.svg',
15-
]}
16-
altTags={['FAQ', 'Blog', 'Repository']}
17-
content={[
18-
'Find the main questions about the project.',
19-
'Share your projects and ideas with our community.',
20-
'Check out our codebase and guidelines.',
21-
]}
22-
links={[
23-
'https://github.com/Web-Dev-Path/web-dev-path/wiki/FAQ',
24-
'/blog',
25-
'https://github.com/Web-Dev-Path/web-dev-path',
26-
]}
27-
linkText={['Our FAQ', 'Our Blog', 'Our Repository']}
28-
customClass='contact-cards'
29-
/>
36+
<CardsColumns cards={cards} customClass='contact-cards' />
3037
</RevealContentContainer>
3138
</div>
3239
);

‎components/containers/Card.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,7 @@ import Link from 'next/link';
33
import styles from '@/styles/Card.module.scss';
44

55
export default function Card({
6-
image,
7-
altTag,
8-
title,
9-
content,
10-
link,
11-
linkText,
6+
card: { image, altTag, title, content, link, linkText },
127
customClass,
138
}) {
149
const LinkComponent = link?.startsWith('http') ? (

‎components/containers/CardsColumns.js

Lines changed: 5 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,7 @@ import Card from '@/components/containers/Card';
77
import Container from '@/components/containers/Container';
88
import styles from '@/styles/CardsColumns.module.scss';
99

10-
export default function CardsColumns({
11-
images,
12-
altTags,
13-
titles,
14-
content,
15-
links,
16-
linkText,
17-
customClass,
18-
}) {
10+
export default function CardsColumns({ cards, customClass }) {
1911
return (
2012
<Container>
2113
<Swiper
@@ -32,33 +24,15 @@ export default function CardsColumns({
3224
spaceBetween: 20,
3325
},
3426
1334: {
35-
slidesPerView: titles.length,
36-
spaceBetween: titles.length < 3 ? 75 : 20,
27+
slidesPerView: cards.length,
28+
spaceBetween: cards.length < 3 ? 75 : 20,
3729
},
3830
}}
3931
>
40-
{titles.map((title, index) => (
32+
{cards.map((card, index) => (
4133
<SwiperSlide key={index} className={styles.swiperSlide}>
4234
<div className={styles.inner__content}>
43-
{images && links && linkText ? (
44-
<Card
45-
key={index}
46-
title={title}
47-
image={images[index]}
48-
altTag={altTags[index]}
49-
content={content[index]}
50-
link={links[index]}
51-
linkText={linkText[index]}
52-
customClass={customClass}
53-
/>
54-
) : (
55-
<Card
56-
key={index}
57-
title={title}
58-
content={content[index]}
59-
customClass={customClass}
60-
/>
61-
)}
35+
<Card key={index} card={card} customClass={customClass} />
6236
</div>
6337
</SwiperSlide>
6438
))}

‎pages/about.js

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {
66
primaryAccent,
77
lightBgColor,
88
} from '@/styles/TwoColumn.module.scss';
9-
import rowStyles from '@/styles/Row.module.scss';
109
import CardsColumns from '@/components/containers/CardsColumns';
1110
import Title from '@/components/snippets/Title';
1211
import Wrapper from '@/components/containers/Wrapper';
@@ -106,10 +105,17 @@ export default function AboutUs() {
106105
<Title title='Our goals' />
107106
</Container>
108107
<CardsColumns
109-
titles={['1', '2']}
110-
content={[
111-
'To provide a safe space for juniors to learn how to communicate in a simulated professional environment.',
112-
'To offer more detailed tasks (GitHub issues) and help the developer assimilate the logical mindset required in a structured project, under guidance following the industry’s best practices throughout the entire process.',
108+
cards={[
109+
{
110+
title: '1',
111+
content:
112+
'To provide a safe space for juniors to learn how to communicate in a simulated professional environment.',
113+
},
114+
{
115+
title: '2',
116+
content:
117+
'To offer more detailed tasks (GitHub issues) and help the developer assimilate the logical mindset required in a structured project, under guidance following the industry’s best practices throughout the entire process.',
118+
},
113119
]}
114120
customClass='our-goals'
115121
/>

‎pages/api/contact.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,11 @@ export default async (req, res) => {
2626
headers: {
2727
'Content-Type': 'application/x-www-form-urlencoded',
2828
},
29-
body: `secret=${process.env.RECAPTCHA_SECRET_KEY}&response=${req.body.gReCaptchaToken}`,
29+
body: `secret=${process.env.RECAPTCHA_SECRET_KEY}&response=${gReCaptchaToken}`,
3030
})
3131
).json();
3232

3333
if (reCaptchaValidation.success) {
34-
// TODO: change the emails to '[email protected]' before PR
3534
// receiverEmail: The email will be sent here
3635
const receiverEmail = '[email protected]';
3736
// sendgridEmail: This is the email verfied by sendgrid

‎pages/index.js

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -34,28 +34,35 @@ export default function Home() {
3434

3535
<RevealContentContainer>
3636
<CardsColumns
37-
titles={[
38-
'Join the project',
39-
'Volunteer to learn together',
40-
'Become a project mentor',
37+
cards={[
38+
{
39+
title: 'Join the project',
40+
image: '/images/join-us.webp',
41+
altTag: 'Join the project',
42+
content:
43+
'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project?',
44+
link: "/about'",
45+
linkText: 'Learn more',
46+
},
47+
{
48+
title: 'Volunteer to learn together',
49+
image: '/images/volunteer.webp',
50+
altTag: 'Volunteer to learn together',
51+
content:
52+
'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
53+
link: '/contact',
54+
linkText: 'Contact us',
55+
},
56+
{
57+
title: 'Become a project mentor',
58+
image: '/images/mentor.webp',
59+
altTag: 'Become a project mentor',
60+
content:
61+
'Are you an experienced web dev who wants to become a mentor? Welcome!',
62+
link: '/about',
63+
linkText: 'Learn more',
64+
},
4165
]}
42-
images={[
43-
'/images/join-us.webp',
44-
'/images/volunteer.webp',
45-
'/images/mentor.webp',
46-
]}
47-
altTags={[
48-
'Join the project',
49-
'Volunteer to learn together',
50-
'Become a project mentor',
51-
]}
52-
content={[
53-
'Are you learning web development and need mentorship? Are you a web dev looking for help or a code buddy for a project? ',
54-
'Would you like to volunteer? For roles other than mentor/mentee, please get in touch.',
55-
'Are you an experienced web dev who wants to become a mentor? Welcome!',
56-
]}
57-
links={['/about', '/contact', '/about']}
58-
linkText={['Learn more', 'Contact us', 'Learn more']}
5966
/>
6067
</RevealContentContainer>
6168

0 commit comments

Comments
 (0)