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, 47 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/Intro.tsx b/packages/dev-tools-pages/ts/components/Intro.tsx
new file mode 100644
index 000000000..c16c888b7
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/Intro.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { Alpha, Beta } from './Typography';
+
+const Main = styled.div`
+ background-color: #f1f4f5;
+ padding: 6.25rem;
+ display: flex;
+ justify-content: space-between;
+`;
+
+const Title = styled(Alpha)`
+ margin-bottom: 2.5rem;
+`;
+
+const Content = styled.div`
+ max-width: 25.9375rem;
+
+ display: flex;
+ flex-direction: column;
+`;
+
+const Code = styled.div`
+ background-color: #e9eced;
+ width: 520px;
+ height: 350px;
+`;
+
+interface IntroProps {
+ title: string;
+ children: React.ReactNode;
+}
+
+function Intro(props: IntroProps) {
+ return (
+ <Main>
+ <Content>
+ <Title>{props.title}</Title>
+ <Beta as="div">{props.children}</Beta>
+ </Content>
+ <Code />
+ </Main>
+ );
+}
+
+export default Intro;