Skip to content

Commit 79adedc

Browse files
cheryllicherylli
committed
refactor cardColumns component
1 parent c19dc52 commit 79adedc

File tree

5 files changed

+73
-62
lines changed

5 files changed

+73
-62
lines changed

‎components/ContactUsCards.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,39 @@ 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>
936
<CardsColumns
37+
cards={cards}
1038
titles={['FAQ', 'Blog', 'Repository']}
1139
images={[
1240
'/images/svg/faq-icon.svg',

‎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
return (

‎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 & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -106,10 +106,17 @@ export default function AboutUs() {
106106
<Title title='Our goals' />
107107
</Container>
108108
<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.',
109+
cards={[
110+
{
111+
title: '1',
112+
content:
113+
'To provide a safe space for juniors to learn how to communicate in a simulated professional environment.',
114+
},
115+
{
116+
title: '2',
117+
content:
118+
'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.',
119+
},
113120
]}
114121
customClass='our-goals'
115122
/>

‎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)