Skip to content

Commit 9e8b64c

Browse files
thorrelltthorrellt
committed
extend Cards and CardsColumns
1 parent 5c9902c commit 9e8b64c

File tree

15 files changed

+250
-130
lines changed

15 files changed

+250
-130
lines changed

‎components/ContactUsCards.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import CardsColumns from './containers/CardColumns';
1+
import { ContactCardsColumns } from './containers/CardColumns/ContactCardsColumns';
22
import RevealContentContainer from './containers/RevealContentContainer';
33
import styled from 'styled-components';
44
import { $white } from '@/styles/_variables';
@@ -38,7 +38,7 @@ export default function ContactUsCards() {
3838
return (
3939
<ContactCardsContainer>
4040
<RevealContentContainer>
41-
<CardsColumns cards={cards} customClass='contact-cards' />
41+
<ContactCardsColumns cards={cards} />
4242
</RevealContentContainer>
4343
</ContactCardsContainer>
4444
);

‎components/blog/BlogPostsContainer/index.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import CardsColumns from '@/components/containers/CardColumns';
1+
import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
22
import Card from '@/components/containers/Card';
3+
import { BlogCard } from '@/components/containers/Card/BlogCard';
34
import Title from '@/components/snippets/Title';
45
import Link from 'next/link';
56
import RevealContentContainer from '@/components/containers/RevealContentContainer';
@@ -46,14 +47,14 @@ const BlogPostsContainer = ({
4647
swipe ? (
4748
<>
4849
{[...splitPosts(posts, 3)].map((p, index) => (
49-
<CardsColumns key={index} cards={p} customClass='blog' />
50+
<BlogCardsColumns key={index} cards={p} />
5051
))}
5152
</>
5253
) : (
5354
<Container>
5455
<S.PostContainer>
5556
{posts?.map((p, index) => (
56-
<Card $cardType='blog' key={index} card={p} />
57+
<BlogCard $cardType='blog' key={index} card={p} />
5758
))}
5859
</S.PostContainer>
5960
</Container>

‎components/containers/Card/AboutUsCard.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { CardInterface } from './CardInterface';
2+
import { AboutUsCardStyles } from './styles';
3+
4+
export function AboutUsCard({ card }) {
5+
return <CardInterface card={card} styledComponents={AboutUsCardStyles} />;
6+
}

‎components/containers/Card/BlogCard.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { CardInterface } from './CardInterface';
2+
import { BlogCardStyles } from './styles';
3+
4+
export function BlogCard({ card }) {
5+
return <CardInterface card={card} styledComponents={BlogCardStyles} />;
6+
}

‎components/containers/Card/CardInterface.js

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import Image from 'next/image';
2+
import { cloneElement } from 'react';
3+
import Link from 'next/link';
4+
import { Tag } from '@/components/blog/Tag';
5+
6+
export function CardInterface({
7+
card: { image, altTag, title, content, link, linkText, tagList },
8+
styledComponents,
9+
$cardType,
10+
}) {
11+
const LinkComponent = link?.startsWith('http') ? (
12+
<a href={link} target='_blank' rel='noopener noreferrer'>
13+
{linkText}
14+
</a>
15+
) : (
16+
<Link href={link}>{linkText}</Link>
17+
);
18+
const S = styledComponents ? styledComponents : CardStyles;
19+
return (
20+
<S.Card $cardType={$cardType}>
21+
{image && (
22+
<S.ImageWrapper $cardType={$cardType}>
23+
<S.CardImage src={image} alt={altTag} $cardType={$cardType} fill />
24+
</S.ImageWrapper>
25+
)}
26+
27+
<S.Title $cardType={$cardType} title={title}>
28+
{title}
29+
</S.Title>
30+
{tagList && tagList.length > 0 ? (
31+
<S.TagContainer>
32+
{tagList.slice(0, 8).map((tag, i) => (
33+
<Tag key={i} text={tag} />
34+
))}
35+
</S.TagContainer>
36+
) : null}
37+
<S.ContentWrapper $cardType={$cardType}>
38+
<p>
39+
{content} {link && LinkComponent}
40+
</p>
41+
</S.ContentWrapper>
42+
</S.Card>
43+
);
44+
}
45+
46+
// export const ContactCard = cloneElement(Card, { $cardType: 'contact-cards' });

‎components/containers/Card/ContactUsCard.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { CardInterface } from './CardInterface';
2+
import { ContactUsCardStyles } from './styles';
3+
4+
export function ContactUsCard({ card }) {
5+
return <CardInterface card={card} styledComponents={ContactUsCardStyles} />;
6+
}

‎components/containers/Card/index.js

Lines changed: 4 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,6 @@
1-
import Image from 'next/image';
2-
import Link from 'next/link';
3-
import S from './styles';
4-
import { Tag } from '@/components/blog/Tag';
1+
import { CardInterface } from './CardInterface';
2+
import { CardStyles } from './styles';
53

6-
export default function Card({
7-
card: { image, altTag, title, content, link, linkText, tagList },
8-
$cardType,
9-
}) {
10-
const LinkComponent = link?.startsWith('http') ? (
11-
<a href={link} target='_blank' rel='noopener noreferrer'>
12-
{linkText}
13-
</a>
14-
) : (
15-
<Link href={link}>{linkText}</Link>
16-
);
17-
return (
18-
<S.Card $cardType={$cardType}>
19-
{image && (
20-
<S.ImageWrapper $cardType={$cardType}>
21-
<S.CardImage src={image} alt={altTag} $cardType={$cardType} fill />
22-
</S.ImageWrapper>
23-
)}
24-
25-
<S.Title $cardType={$cardType} title={title}>
26-
{title}
27-
</S.Title>
28-
{tagList && tagList.length > 0 ? (
29-
<S.TagContainer>
30-
{tagList.slice(0, 8).map((tag, i) => (
31-
<Tag key={i} text={tag} />
32-
))}
33-
</S.TagContainer>
34-
) : null}
35-
<S.ContentWrapper $cardType={$cardType}>
36-
<p>
37-
{content} {link && LinkComponent}
38-
</p>
39-
</S.ContentWrapper>
40-
</S.Card>
41-
);
4+
export function ContactUsCard({ card }) {
5+
return <CardInterface card={card} styledComponents={CardStyles} />;
426
}

‎components/containers/Card/styles.js

Lines changed: 95 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,8 @@ const Card = styled.div`
4343
&:first-child,
4444
&:last-child {
4545
margin: 1.5rem 0.5rem 0 0.5rem;
46-
${props => (props.$cardType === 'blog' ? Blog : '')}
4746
}
48-
`)}
49-
50-
//check props for button variations
51-
${props => (props.$cardType === 'our-goals' ? AboutUs : '')}
52-
${props => (props.$cardType === 'contact-cards' ? ContactUsCards : '')}
53-
${props => (props.$cardType === 'blog' ? Blog : '')}
47+
`)} //check props for button variations
5448
`;
5549

5650
const Title = styled.h2`
@@ -63,20 +57,14 @@ const Title = styled.h2`
6357
6458
${m.tablet(css`
6559
font-size: 2.25rem;
66-
${props => (props.$cardType === 'our-goals' ? AboutUsTitle : '')}
67-
`)}
68-
69-
//check props for button variations
70-
${props => (props.$cardType === 'our-goals' ? AboutUsTitle : '')}
71-
${props => (props.$cardType === 'blog' ? BlogTitle : '')}
60+
`)}//check props for button variations
7261
`;
7362

7463
const ContentWrapper = styled.div`
7564
display: flex;
7665
align-items: center;
7766
7867
//check props for button variations
79-
${props => (props.$cardType === 'our-goals' ? AboutUsContentWrapper : '')}
8068
`;
8169

8270
const ImageWrapper = styled.div`
@@ -85,17 +73,13 @@ const ImageWrapper = styled.div`
8573
position: relative;
8674
8775
//check props for button variations
88-
${props => (props.$cardType === 'blog' ? BlogImageWrapper : '')}
89-
${props =>
90-
props.$cardType === 'contact-cards' ? ContactUsCardImageWrapper : ''}
9176
`;
9277

9378
const CardImage = styled(Image)`
9479
border-radius: 0.25rem;
9580
object-fit: cover;
9681
9782
//check props for button variations
98-
${props => (props.$cardType === 'contact-cards' ? ContactUsCardImage : '')}
9983
`;
10084

10185
const TagContainer = styled.div`
@@ -111,7 +95,7 @@ const TagContainer = styled.div`
11195
`;
11296

11397
//About Us Varients Varients
114-
const AboutUs = css`
98+
const AboutUs = styled(Card)`
11599
background-color: ${$primaryAccentColor};
116100
max-height: 35rem;
117101
@@ -120,7 +104,7 @@ const AboutUs = css`
120104
`)}
121105
`;
122106

123-
const AboutUsTitle = css`
107+
const AboutUsTitle = styled(Title)`
124108
font-size: 3.5rem;
125109
text-align: center;
126110
@@ -129,7 +113,7 @@ const AboutUsTitle = css`
129113
`)}
130114
`;
131115

132-
const AboutUsContentWrapper = css`
116+
const AboutUsContentWrapper = styled(ContentWrapper)`
133117
${m.desktop(css`
134118
& p {
135119
font-size: 1.8rem;
@@ -139,7 +123,16 @@ const AboutUsContentWrapper = css`
139123
`;
140124

141125
//Contact Us Cards Varients
142-
const ContactUsCards = css`
126+
const ContactUsCardsCss = css`
127+
height: 27rem;
128+
background-color: ${$white};
129+
130+
${m.desktop(css`
131+
height: 25rem;
132+
`)}
133+
`;
134+
135+
const ContactUsCard = styled(Card)`
143136
height: 27rem;
144137
background-color: ${$white};
145138
@@ -148,7 +141,7 @@ const ContactUsCards = css`
148141
`)}
149142
`;
150143

151-
const ContactUsCardImageWrapper = css`
144+
const ContactUsCardImageWrapperCss = css`
152145
width: auto;
153146
position: relative;
154147
height: 5rem;
@@ -157,22 +150,56 @@ const ContactUsCardImageWrapper = css`
157150
margin-bottom: 3rem;
158151
`;
159152

160-
const ContactUsCardImage = css`
153+
const ContactUsCardImageWrapper = styled(ImageWrapper)`
154+
width: auto;
155+
position: relative;
156+
height: 5rem;
157+
margin-right: 75%;
158+
margin-top: 3rem;
159+
margin-bottom: 3rem;
160+
`;
161+
162+
const ContactUsCardImageCss = css`
163+
margin: 0;
164+
position: absolute;
165+
object-fit: contain !important;
166+
`;
167+
168+
const ContactUsCardImage = styled(Image)`
161169
margin: 0;
162170
position: absolute;
163171
object-fit: contain !important;
164172
`;
165173

166174
//Blog Varients
167-
const Blog = css`
175+
const BlogCss = css`
168176
margin: 1rem 0.5rem 0 0.5rem;
169177
170178
${m.tablet(css`
171179
height: 40rem;
172180
`)}
173181
`;
174182

175-
const BlogTitle = css`
183+
const Blog = styled(Card)`
184+
margin: 1rem 0.5rem 0 0.5rem;
185+
186+
${m.tablet(css`
187+
height: 40rem;
188+
`)}
189+
`;
190+
191+
const BlogTitleCss = css`
192+
font-size: 1.3rem;
193+
margin-bottom: 0.7rem;
194+
max-height: 7rem;
195+
overflow: hidden;
196+
197+
${m.tablet(css`
198+
font-size: 1.3rem;
199+
`)}
200+
`;
201+
202+
const BlogTitle = styled(Title)`
176203
font-size: 1.3rem;
177204
margin-bottom: 0.7rem;
178205
max-height: 7rem;
@@ -183,15 +210,49 @@ const BlogTitle = css`
183210
`)}
184211
`;
185212

186-
const BlogImageWrapper = css`
213+
const BlogImageWrapperCss = css`
214+
height: 12rem;
215+
`;
216+
217+
const BlogImageWrapper = styled(ImageWrapper)`
187218
height: 12rem;
188219
`;
189220

190-
export default {
191-
Card,
192-
ImageWrapper,
193-
CardImage,
194-
Title,
195-
ContentWrapper,
196-
TagContainer,
221+
// export default {
222+
// Card,
223+
// ImageWrapper,
224+
// CardImage,
225+
// Title,
226+
// ContentWrapper,
227+
// TagContainer,
228+
// };
229+
230+
export const CardStyles = {
231+
Card: Card,
232+
ImageWrapper: ImageWrapper,
233+
CardImage: CardImage,
234+
Title: Title,
235+
ContentWrapper: ContentWrapper,
236+
TagContainer: TagContainer,
237+
};
238+
239+
export const AboutUsCardStyles = {
240+
...CardStyles,
241+
Card: AboutUs,
242+
Title: AboutUsTitle,
243+
ContentWrapper: AboutUsContentWrapper,
244+
};
245+
246+
export const ContactUsCardStyles = {
247+
...CardStyles,
248+
Card: ContactUsCard,
249+
ImageWrapper: ContactUsCardImageWrapper,
250+
CardImage: ContactUsCardImage,
251+
};
252+
253+
export const BlogCardStyles = {
254+
...CardStyles,
255+
Card: Blog,
256+
ImageWrapper: BlogImageWrapper,
257+
Title: BlogTitle,
197258
};

‎components/containers/CardColumns/BlogCardsColumns.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { CardsColumnsInterface } from './CardColumnsInterface';
2+
import { BlogCard } from '@/components/containers/Card/BlogCard';
3+
4+
export function BlogCardsColumns({ cards }) {
5+
return (
6+
<CardsColumnsInterface
7+
cards={cards}
8+
cardComponent={BlogCard}
9+
customClass='blog'
10+
/>
11+
);
12+
}

0 commit comments

Comments
 (0)