Skip to content

Commit 411cb5e

Browse files
oluwatobissoluwatobiss
authored
Merge branch 'main' into refactor/to-scss-postcontent
2 parents 6507550 + df725c2 commit 411cb5e

11 files changed

Lines changed: 150 additions & 178 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,4 +164,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
164164
- SubmitButton
165165
- AuthorBio
166166
- PostContent
167+
- SearchBar
168+
- BlogPostsContainer
169+
- RevealContentContainer
167170
- Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
171+
- Updated SearchInput width to 100% for better styling

‎components/blog/BlogPostsContainer/BlogPostsContainer.module.scss‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
@use '@/styles/mixins' as *;
2+
@use '@/styles/variables' as *;
3+
4+
.blogContainer {
5+
display: flex;
6+
flex-direction: column;
7+
margin: 3rem 0;
8+
}
9+
10+
.postContainer {
11+
display: flex;
12+
flex-wrap: wrap;
13+
justify-content: center;
14+
margin-bottom: 3rem;
15+
16+
@include tablet {
17+
justify-content: flex-start;
18+
}
19+
20+
& > div {
21+
@include desktop {
22+
flex-basis: 48%;
23+
}
24+
}
25+
26+
@include large-desktop {
27+
flex-basis: 32%;
28+
}
29+
}
30+
31+
.bottomLink {
32+
font-size: 1.5rem;
33+
font-weight: bold;
34+
position: relative;
35+
display: block;
36+
text-align: center;
37+
}
38+
39+
.viewAllBottomLink {
40+
@extend .bottomLink;
41+
top: -3rem;
42+
43+
@include desktop {
44+
float: right;
45+
top: -5rem;
46+
}
47+
}
48+
49+
.backBottomLink {
50+
@extend .bottomLink;
51+
top: -2rem;
52+
53+
@include desktop {
54+
float: left;
55+
top: -1rem;
56+
}
57+
}

‎components/blog/BlogPostsContainer/index.js‎

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1+
import Link from 'next/link';
12
import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
23
import { BlogCard } from '@/components/containers/Card/BlogCard';
34
import Title from '@/components/snippets/Title';
45
import RevealContentContainer from '@/components/containers/RevealContentContainer';
5-
import S from './styles';
66
import { tagToHeading } from '@/utils/blogCategories';
77
import Container from '@/components/containers/Container';
8+
import styles from './BlogPostsContainer.module.scss';
89

910
const BlogPostsContainer = ({
1011
posts,
@@ -24,7 +25,7 @@ const BlogPostsContainer = ({
2425

2526
return (
2627
<RevealContentContainer>
27-
<S.BlogContainer>
28+
<section className={styles.blogContainer}>
2829
{heading ? (
2930
<Container>
3031
<Title title={heading} />
@@ -34,40 +35,41 @@ const BlogPostsContainer = ({
3435
<Title title={tagToHeading[tag]} />
3536
</Container>
3637
) : null}
37-
{
38-
swipe ? (
39-
<>
40-
{[posts.slice(0,6)].map((p, index) => (
41-
<BlogCardsColumns key={index} cards={p} />
38+
{swipe ? (
39+
<>
40+
{[posts.slice(0, 6)].map((p, index) => (
41+
<BlogCardsColumns key={index} cards={p} />
42+
))}
43+
</>
44+
) : (
45+
<Container>
46+
<div className={styles.postContainer}>
47+
{posts?.map((p, index) => (
48+
<BlogCard $cardType='blog' key={index} card={p} />
4249
))}
43-
</>
44-
) : (
45-
<Container>
46-
<S.PostContainer>
47-
{posts?.map((p, index) => (
48-
<BlogCard $cardType='blog' key={index} card={p} />
49-
))}
50-
</S.PostContainer>
51-
</Container>
52-
)
53-
}
50+
</div>
51+
</Container>
52+
)}
5453

5554
{viewall && posts.length >= 3 ? (
5655
<Container>
57-
<S.ViewAllBottomLink
56+
<Link
5857
href={tag ? `/blog/category/${tag}` : '/blog/category/all'}
58+
className={styles.viewAllBottomLink}
5959
>
6060
view all
61-
</S.ViewAllBottomLink>
61+
</Link>
6262
</Container>
6363
) : null}
6464

6565
{back ? (
6666
<Container>
67-
<S.BackBottomLink href={`/blog`}>&#60; back</S.BackBottomLink>
67+
<Link href={`/blog`} className={styles.backBottomLink}>
68+
&#60; back
69+
</Link>
6870
</Container>
6971
) : null}
70-
</S.BlogContainer>
72+
</section>
7173
</RevealContentContainer>
7274
);
7375
};

‎components/blog/BlogPostsContainer/styles.js‎

Lines changed: 0 additions & 89 deletions
This file was deleted.

‎components/blog/SearchBar/SearchBar.module.scss‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
@use '@/styles/mixins' as *;
2+
3+
.searchBar {
4+
display: flex;
5+
justify-content: space-between;
6+
height: 2.5rem;
7+
border-radius: 0.5rem;
8+
border: 0;
9+
box-shadow: 2px 4px 8px 3px var(--color-box-shadow);
10+
font-size: 1.2rem;
11+
width: 100%;
12+
margin-top: 3rem;
13+
14+
@include desktop {
15+
width: 24rem;
16+
margin: unset;
17+
}
18+
}
19+
20+
.searchInput {
21+
height: 100%;
22+
border: 0;
23+
padding-left: 1rem;
24+
width: 100%;
25+
}
26+
27+
.submitButton {
28+
text-indent: -999px;
29+
overflow: hidden;
30+
width: 1.5rem;
31+
border: 1px solid var(--color-transparent);
32+
background: url('/images/svg/search.svg');
33+
background-size: cover;
34+
background-repeat: no-repeat;
35+
margin: 0.5rem 1rem 0.5rem 1rem;
36+
cursor: pointer;
37+
}

‎components/blog/SearchBar/index.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import S from './styles';
1+
import styles from './SearchBar.module.scss';
22
import { useRef } from 'react';
33

44
const SearchBar = ({ setSearchTerm }) => {
@@ -7,17 +7,18 @@ const SearchBar = ({ setSearchTerm }) => {
77
setSearchTerm(searchInput.current.value);
88
};
99
return (
10-
<S.SearchBar>
11-
<S.SearchInput
10+
<div className={styles.searchBar}>
11+
<input
1212
ref={searchInput}
13+
className={styles.searchInput}
1314
type='search'
1415
placeholder='keyword or topic'
1516
onChange={search}
1617
/>
17-
<S.SubmitButton type='submit' onClick={search}>
18+
<button type='submit' className={styles.submitButton} onClick={search}>
1819
Search
19-
</S.SubmitButton>
20-
</S.SearchBar>
20+
</button>
21+
</div>
2122
);
2223
};
2324

‎components/blog/SearchBar/styles.js‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎components/containers/RevealContentContainer/RevealContentContainer.module.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@use '@/styles/mixins' as *;
2+
3+
.sectionHidden {
4+
opacity: 0;
5+
transform: translateY(8rem);
6+
}
7+
8+
.revealContainerWrapper {
9+
@include transition(transform 1s, opacity 1s);
10+
}

‎components/containers/RevealContentContainer/index.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useEffect, useState } from 'react';
22
import { useIntersect } from '@/hooks/useIntersect';
3-
import S from './styles';
3+
import styles from './RevealContentContainer.module.scss';
44

55
const RevealContentContainer = ({ children }) => {
66
const [ref, entry] = useIntersect({});
@@ -15,9 +15,16 @@ const RevealContentContainer = ({ children }) => {
1515
}, [entry.isIntersecting]);
1616

1717
return (
18-
<S.RevealContainerWrapper ref={ref} $hiddenStyle={hiddenStyle}>
18+
<div
19+
ref={ref}
20+
className={
21+
hiddenStyle
22+
? `${styles.revealContainerWrapper} ${styles.sectionHidden}`
23+
: styles.revealContainerWrapper
24+
}
25+
>
1926
{children}
20-
</S.RevealContainerWrapper>
27+
</div>
2128
);
2229
};
2330

0 commit comments

Comments
 (0)