diff options
Diffstat (limited to 'packages/website/ts/@next/components/aboutPageLayout.tsx')
| -rw-r--r-- | packages/website/ts/@next/components/aboutPageLayout.tsx | 55 |
1 files changed, 29 insertions, 26 deletions
diff --git a/packages/website/ts/@next/components/aboutPageLayout.tsx b/packages/website/ts/@next/components/aboutPageLayout.tsx index 7d98804bb..86a94ae2b 100644 --- a/packages/website/ts/@next/components/aboutPageLayout.tsx +++ b/packages/website/ts/@next/components/aboutPageLayout.tsx @@ -1,3 +1,4 @@ +import * as _ from 'lodash'; import * as React from 'react'; import styled from 'styled-components'; @@ -14,7 +15,8 @@ interface Props { title: string; description: React.ReactNode | string; linkLabel?: string; - linkUrl?: string; + href?: string; + to?: string; children?: React.ReactNode; } @@ -22,31 +24,32 @@ export const AboutPageLayout = (props: Props) => ( <SiteWrap theme="light"> <Section isFlex={true} maxWidth="1170px" wrapWidth="100%"> <Column> - <ChapterLink to={WebsitePaths.AboutMission}>Mission</ChapterLink> - <ChapterLink to={WebsitePaths.AboutTeam}>Team</ChapterLink> - <ChapterLink to={WebsitePaths.AboutPress}>Press</ChapterLink> - <ChapterLink to={WebsitePaths.AboutJobs}>Jobs</ChapterLink> - </Column> + <ChapterLink to={WebsitePaths.AboutMission}>Mission</ChapterLink> + <ChapterLink to={WebsitePaths.AboutTeam}>Team</ChapterLink> + <ChapterLink to={WebsitePaths.AboutPress}>Press</ChapterLink> + <ChapterLink to={WebsitePaths.AboutJobs}>Jobs</ChapterLink> + </Column> - <Column width="70%" maxWidth="800px"> - <Column width="100%" maxWidth="680px"> - <AnimatedHeading size="medium"> - {props.title} - </AnimatedHeading> + <Column width="70%" maxWidth="800px"> + <Column width="100%" maxWidth="680px"> + <AnimatedHeading size="medium">{props.title}</AnimatedHeading> - <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}> - {props.description} - </AnimatedParagraph> + <AnimatedParagraph size="medium" marginBottom="60px" isMuted={0.65}> + {props.description} + </AnimatedParagraph> - {(props.linkLabel && props.linkUrl) && - <AnimatedLink - to={props.linkUrl} - isWithArrow={true} - isAccentColor={true} - > - {props.linkLabel} - </AnimatedLink> - } + {props.linkLabel && + (props.href || props.to) && ( + <AnimatedLink + to={props.to} + href={props.href} + target={!_.isUndefined(props.href) ? '_blank' : undefined} + isWithArrow={true} + isAccentColor={true} + > + {props.linkLabel} + </AnimatedLink> + )} </Column> </Column> </Section> @@ -56,13 +59,13 @@ export const AboutPageLayout = (props: Props) => ( ); const AnimatedHeading = styled(Heading)` - ${addFadeInAnimation('0.5s')} + ${addFadeInAnimation('0.5s')}; `; const AnimatedParagraph = styled(Paragraph)` - ${addFadeInAnimation('0.5s', '0.15s')} + ${addFadeInAnimation('0.5s', '0.15s')}; `; const AnimatedLink = styled(Button)` - ${addFadeInAnimation('0.6s', '0.3s')} + ${addFadeInAnimation('0.6s', '0.3s')}; `; |