uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-17 04:30:31 +09:00
Code Issues Releases Activity

fix: add integration section

Browse Source
This commit is contained in:
uetchy 2020-07-29 14:02:27 +09:00 committed by uetchy
parent 18d956abb1
commit f86bcaa05a
2 changed files with 49 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
src/components/Welcome.tsx
View File

@ -57,7 +57,7 @@ const Welcome: React.FC = () => {
return ( return (
<Container> <Container>
<Hero> <Section>
<HeroTitle>{t('title')}</HeroTitle> <HeroTitle>{t('title')}</HeroTitle>
<HeroText>{t('description')}</HeroText> <HeroText>{t('description')}</HeroText>
<ButtonContainer> <ButtonContainer>
@ -69,21 +69,25 @@ const Welcome: React.FC = () => {
</ListButton> </ListButton>
</List> </List>
</ButtonContainer> </ButtonContainer>
</Hero> </Section>
<HighlightedList> <HighlightSection>
{Object.keys(supportedProviders).map((key) => ( {Object.keys(supportedProviders).map((key) => (
<ListItem key={key}> <ListItem key={key}>
{supportedProviders[key]} {t(`providers.${key}`)} {supportedProviders[key]} {t(`providers.${key}`)}
</ListItem> </ListItem>
))} ))}
</HighlightedList> </HighlightSection>
<Section>
<Title>Integrations</Title>
<blockquote>Soon</blockquote>
</Section>
</Container> </Container>
); );
}; };
export default Welcome; export default Welcome;
const Container = styled.div` const Container = styled.div`
margin-top: 30px;
padding-bottom: 40px; padding-bottom: 40px;
text-align: center; text-align: center;
font-size: 1.5rem; font-size: 1.5rem;
@ -91,13 +95,38 @@ const Container = styled.div`
${mobile} { ${mobile} {
margin-top: 0px; margin-top: 0px;
text-align: left; text-align: left;
font-size: 1.2rem; font-size: 1.1rem;
} }
`; `;
const HeroTitle = styled.h1` const Section = styled.div`
padding-bottom: 30px; padding: 100px 20vw;
line-height: 1em;
${mobile} {
padding: 60px 40px;
}
`;
const HighlightSection = styled.div`
padding: 100px 20vw;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
${mobile} {
flex-direction: column;
padding: 40px 40px 60px;
}
color: white;
/* background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); */
background: #632bec;
`;
const Title = styled.h1`
line-height: 1.6em;
font-size: 5rem; font-size: 5rem;
font-weight: 700; font-weight: 700;
@ -106,6 +135,11 @@ const HeroTitle = styled.h1`
} }
`; `;
const HeroTitle = styled(Title)`
padding-bottom: 30px;
line-height: 1em;
`;
const HeroText = styled.p` const HeroText = styled.p`
font-size: 1.2em; font-size: 1.2em;
font-weight: 400; font-weight: 400;
@ -113,17 +147,6 @@ const HeroText = styled.p`
color: #3c3c3c; color: #3c3c3c;
`; `;
const Hero = styled.div`
margin-right: 20vw;
margin-left: 20vw;
${mobile} {
margin: inherit;
padding-right: 20px;
padding-left: 20px;
}
`;
const ButtonContainer = styled.div` const ButtonContainer = styled.div`
margin: 10px 0 0 0; margin: 10px 0 0 0;
`; `;
@ -141,26 +164,6 @@ const List = styled.div`
} }
`; `;
const HighlightedList = styled.div`
margin-top: 100px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
${mobile} {
flex-direction: column;
margin-top: 50px;
padding: 20px;
}
padding: 50px 20vw 50px 20vw;
color: white;
/* background-image: linear-gradient(180deg, #a57bf3 0%, #4364e1 100%); */
background: #632bec;
`;
const ListItem = styled.div` const ListItem = styled.div`
margin: 20px 25px; margin: 20px 25px;
display: flex; display: flex;

9
src/components/cards/core.tsx
View File

@ -219,7 +219,8 @@ export const Result: React.FC<{
<OutboundLink <OutboundLink
to={link} to={link}
eventLabel={link.split('/')[2]} eventLabel={link.split('/')[2]}
target="_blank"> target="_blank"
>
{content} {content}
</OutboundLink> </OutboundLink>
) : ( ) : (
@ -274,7 +275,8 @@ class ErrorBoundary extends React.Component<
this.state.eventId ? ` (${this.state.eventId})` : '' this.state.eventId ? ` (${this.state.eventId})` : ''
}`} }`}
placement="top" placement="top"
trigger={['hover']}> trigger={['hover']}
>
<ResultItem color={COLORS.error}> <ResultItem color={COLORS.error}>
<ResultIcon> <ResultIcon>
<GoInfo /> <GoInfo />
@ -296,7 +298,8 @@ const ErrorHandler: React.FC = ({ children }) => (
<ResultContainer> <ResultContainer>
<BarLoader /> <BarLoader />
</ResultContainer> </ResultContainer>
}> }
>
{children} {children}
</Suspense> </Suspense>
</ErrorBoundary> </ErrorBoundary>