aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components/Intro.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts/components/Intro.tsx')
-rw-r--r--packages/dev-tools-pages/ts/components/Intro.tsx47
1 files changed, 30 insertions, 17 deletions
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
index e5c95d4c2..a5a7e9dc4 100644
--- a/packages/dev-tools-pages/ts/components/Intro.tsx
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -4,6 +4,7 @@ import { media, colors } from '../variables';
import { Alpha, Lead } from './Typography';
import Container from './Container';
+import Breakout from './Breakout';
const Main = styled.div`
background-color: ${colors.lightGray};
@@ -17,12 +18,6 @@ const Main = styled.div`
`};
`;
-const Inner = styled.div`
- display: flex;
- flex-direction: column;
- width: 100%;
-`;
-
const Title = styled(Alpha)`
margin-bottom: 2.5rem;
@@ -32,38 +27,56 @@ const Title = styled(Alpha)`
const Blocks = styled.div`
display: flex;
justify-content: space-between;
+ width: 100%;
${media.small`display: block;`};
`;
-const IntroLead = styled(Lead)`
+
+const StyledIntroLead = styled(Lead)`
max-width: 25.9375rem;
${media.small`margin-bottom: 1.5625rem;`};
`;
-const IntroAside = styled.div`
+
+const StyledIntroAside = styled.div`
max-width: 32.5rem;
position: relative;
-
- ${media.small`
- margin-left: -30px;
- width: calc(100% + 60px);
- `};
`;
interface IntroProps {
+ children?: React.ReactNode;
+}
+
+interface IntroLeadProps {
title: string;
children?: React.ReactNode;
}
+function IntroLead(props: IntroLeadProps) {
+ return (
+ <StyledIntroLead>
+ <Title>{props.title}</Title>
+ {props.children}
+ </StyledIntroLead>
+ )
+}
+
+function IntroAside(props: IntroProps) {
+ return (
+ <Breakout>
+ <StyledIntroAside>
+ {props.children}
+ </StyledIntroAside>
+ </Breakout>
+ )
+}
+
function Intro(props: IntroProps) {
return (
<Container wide>
<Main>
- <Inner>
- <Title>{props.title}</Title>
- <Blocks>{props.children}</Blocks>
- </Inner>
+ <Blocks>{props.children}</Blocks>
</Main>
</Container>
);