Skip to content

Commit c897e8d

Browse files
author
Tiko
committed
Credits Component added and included in youngpwr case
1 parent f5ebead commit c897e8d

File tree

4 files changed

+139
-1
lines changed

4 files changed

+139
-1
lines changed

‎src/containers/Credits/Credits.components.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import PropTypes from 'prop-types';
4+
import theme from '../../styles/theme';
5+
import ArrowButton from '../../components/ArrowButton';
6+
7+
const {mediaQueryMin} = theme;
8+
export const CreditsContainer = styled.div`
9+
width: 100vw;
10+
background-color: ${theme.colors.secondary};
11+
padding: 5em 10em 10em 10em;
12+
`;
13+
export const TitleContainer = styled.div`
14+
margin-bottom: 6em;
15+
`;
16+
export const Container = styled.div`
17+
display: grid;
18+
grid-template-columns: 1fr 1fr;
19+
@media (${mediaQueryMin.md}){
20+
grid-template-columns: 1fr 1fr 1fr;
21+
}
22+
23+
`;
24+
25+
export const Column = styled.div`
26+
display: flex;
27+
flex-direction: column;
28+
`;
29+
30+
export const CreditItemContainer = styled.div`
31+
margin: 1em;
32+
`;
33+
export const CreditTitle = styled.p`
34+
margin-bottom: 0.5em;
35+
`;
36+
export const CreditText = styled.p`
37+
margin-bottom: 0.5em;
38+
`;
39+
export const CreditItem = ({ title, credits }) => (
40+
<CreditItemContainer>
41+
<CreditTitle className="subtitle">{title}</CreditTitle>
42+
{credits.map(credit => (
43+
<CreditText className="Paragraph light">{credit}</CreditText>
44+
))}
45+
</CreditItemContainer>
46+
);
47+
48+
CreditItem.propTypes = {
49+
title: PropTypes.string.isRequired,
50+
credits: PropTypes.arrayOf(PropTypes.string).isRequired,
51+
};
52+
53+
export const CreditItemWithLinks = ({ title, credits, links }) => (
54+
<CreditItemContainer>
55+
<CreditTitle className="subtitle">{title}</CreditTitle>
56+
{credits.map((credit, index) => (
57+
<>
58+
<CreditText>{credit}</CreditText>
59+
<CreditText>
60+
<ArrowButton href={links[index]}>Go to page</ArrowButton>
61+
</CreditText>
62+
</>
63+
))}
64+
</CreditItemContainer>
65+
);
66+
67+
CreditItemWithLinks.propTypes = {
68+
title: PropTypes.string.isRequired,
69+
credits: PropTypes.arrayOf(PropTypes.string).isRequired,
70+
links: PropTypes.arrayOf(PropTypes.string).isRequired,
71+
};

‎src/containers/Credits/Credits.jsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import {
4+
Column,
5+
Container,
6+
CreditItem, CreditItemWithLinks, CreditsContainer, TitleContainer,
7+
} from '../Credits/Credits.components';
8+
9+
10+
11+
const Credits = ({
12+
partner,
13+
year,
14+
designers,
15+
backend,
16+
frontend,
17+
special,
18+
resources,
19+
resourceLinks,
20+
}) => (
21+
<CreditsContainer>
22+
<TitleContainer>
23+
<h2>Credits</h2>
24+
</TitleContainer>
25+
<Container>
26+
<Column>
27+
<CreditItem credits={[partner]} title="Partner"/>
28+
<CreditItem credits={[year]} title="Jaar" />
29+
</Column>
30+
<Column>
31+
<CreditItem credits={designers} title="UX Design"/>
32+
<CreditItem credits={backend} title="Back-end developer"/>
33+
<CreditItem credits={frontend} title="Front-end developer"/>
34+
</Column>
35+
<Column>
36+
<CreditItem credits={special} title="Special Thanks"/>
37+
<CreditItemWithLinks credits={resources} links={resourceLinks} title="Resources"/>
38+
</Column>
39+
</Container>
40+
</CreditsContainer>
41+
42+
);
43+
44+
Credits.propTypes = {
45+
partner: PropTypes.string.isRequired,
46+
year: PropTypes.string.isRequired,
47+
designers: PropTypes.arrayOf(PropTypes.string).isRequired,
48+
backend: PropTypes.arrayOf(PropTypes.string).isRequired,
49+
frontend: PropTypes.arrayOf(PropTypes.string).isRequired,
50+
special: PropTypes.arrayOf(PropTypes.string).isRequired,
51+
resources: PropTypes.arrayOf(PropTypes.string).isRequired,
52+
resourceLinks: PropTypes.arrayOf(PropTypes.string).isRequired,
53+
};
54+
55+
export default Credits;

‎src/images/img/cases/youngpwr/case-youngpwr-teamfoto.png‎

2.69 MB
Loading

‎src/pages/case/youngpwr.jsx‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@ import {
77
ResultsAndNumbers,
88
} from '../../containers/ContentBlocks/ContentBlocks';
99
import Deliverables from '../../containers/Deliverables';
10-
import TextBlock from '../../containers/TextBlock/TextBlock';
10+
import Credits from '../../containers/Credits/Credits';
1111

1212
// section for image imports in the form of const img = require(url);
13+
const useCase = require('../../images/img/cases/youngpwr/case-youngpwr-teamfoto.png');
1314
const match = '';
1415
const research = '';
1516
const fundering = '';
@@ -22,6 +23,7 @@ const pageSettings = {
2223
description:
2324
'Met een nieuw platform ondersteunen we de ontplooiing van scholieren en studenten met een wens om te werken of ondernemen.',
2425
keywords: '', // TODO: add keywords
26+
image: useCase,
2527
};
2628

2729
const Case = () => (
@@ -149,6 +151,16 @@ const Case = () => (
149151
title="Cijfers tot nu toe"
150152
/>
151153
</Section>
154+
<Credits
155+
partner="Youngpwr"
156+
year="2020"
157+
designers={['Chris Färber']}
158+
backend={['Luciano Nooijen']}
159+
frontend={['Luciano Nooijen','Chris Färber']}
160+
special={['Youngpwr']}
161+
resources={['Youngpwr Website']}
162+
resourceLinks={["https://youngpwr.nl/"]}
163+
/>
152164
</Layout>
153165
);
154166

0 commit comments

Comments
 (0)