aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/components/compiler.tsx
diff options
context:
space:
mode:
authorFabio B <kandinsky454@protonmail.ch>2019-01-09 23:22:59 +0800
committerGitHub <noreply@github.com>2019-01-09 23:22:59 +0800
commit08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb (patch)
treec2def4f4295f3bf5d61ceef51aa659feb73ef814 /packages/dev-tools-pages/ts/components/compiler.tsx
parentaa5af04447dfae24731557c6beead55bd8ff99a9 (diff)
parent39786c3ad53c1579c4f22bd19f519589b9646287 (diff)
downloaddexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar
dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar.gz
dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar.bz2
dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar.lz
dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar.xz
dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.tar.zst
dexon-sol-tools-08d0ff48c3bfdb6277d9b80169bdb66f75e55fbb.zip
Merge pull request #1249 from bakkenbaeck/dev-tools-pages
Dev tools pages
Diffstat (limited to 'packages/dev-tools-pages/ts/components/compiler.tsx')
-rw-r--r--packages/dev-tools-pages/ts/components/compiler.tsx90
1 files changed, 90 insertions, 0 deletions
diff --git a/packages/dev-tools-pages/ts/components/compiler.tsx b/packages/dev-tools-pages/ts/components/compiler.tsx
new file mode 100644
index 000000000..694a535dd
--- /dev/null
+++ b/packages/dev-tools-pages/ts/components/compiler.tsx
@@ -0,0 +1,90 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { colors, media } from 'ts/variables';
+
+import { Breakout } from './breakout';
+import { Container } from './container';
+import { InlineCode } from './inline-code';
+
+const Cards = styled.dl`
+ column-count: 3;
+ column-gap: 1.25rem;
+
+ ${media.medium`
+ column-count: 1;
+ `};
+`;
+
+const Card = styled.div`
+ background-color: ${colors.lightGray};
+ padding: 3.125rem;
+ padding-bottom: 2.5rem;
+ display: inline-block;
+ margin-bottom: 1.25rem;
+ width: 100%;
+
+ ${media.medium`
+ padding: 1.875rem;
+ `};
+`;
+
+const Dt = styled.dt`
+ font-weight: 500;
+ display: inline;
+ ::after {
+ content: '. ';
+ }
+`;
+
+const Dd = styled.dd`
+ display: inline;
+ margin-left: 0;
+`;
+
+const cards = [
+ {
+ title: 'A Project-centric',
+ body: (
+ <React.Fragment>
+ Compiles an entire project instead of only individual <InlineCode isAlt={true}>.sol</InlineCode> files.
+ </React.Fragment>
+ ),
+ },
+ {
+ title: 'Incremental builds',
+ body: 'Recompiles your smart contracts after they have changed',
+ },
+ {
+ title: 'Customizable artifacts',
+ body:
+ 'Stores only the required compiler output in your artifacts, so you can have complete control over your bundle size.',
+ },
+ {
+ title: 'Seamless',
+ body: 'Fetches and caches the required compiler binaries.',
+ },
+ {
+ title: 'Versioning',
+ body:
+ 'Compiles each contract with the version specified at the top of its file (sol-compiler even supports version ranges!).',
+ },
+];
+
+const Compiler: React.StatelessComponent<{}> = () => (
+ <Container>
+ <Breakout>
+ <Cards>
+ {_.map(cards, card => (
+ <Card key={card.title.split(' ').join('-')}>
+ <Dt>{card.title}</Dt>
+ <Dd>{card.body}</Dd>
+ </Card>
+ ))}
+ </Cards>
+ </Breakout>
+ </Container>
+);
+
+export { Compiler };