diff options
Diffstat (limited to 'packages/dev-tools-pages/ts/components')
18 files changed, 604 insertions, 213 deletions
diff --git a/packages/dev-tools-pages/ts/components/Button.tsx b/packages/dev-tools-pages/ts/components/Button.tsx new file mode 100644 index 000000000..e676961c8 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Button.tsx @@ -0,0 +1,26 @@ +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; + +interface ButtonProps extends Props { + large?: boolean; +} + +const Button = + styled.button < + ButtonProps > + ` + font-family: inherit; + font-size: ${props => (props.large ? '1.125rem' : '.875rem')}; + font-weight: 500; + white-space: nowrap; + vertical-align: middle; + background-color: ${props => props.colors.secondary}; + color: #000; + border: 0; + border-radius: 5rem; + padding: ${props => (props.large ? '1.125rem 2.375rem' : '.5625rem 1.25rem')}; + display: inline-block; +`; + +export default withContext(Button); diff --git a/packages/dev-tools-pages/ts/components/Code.tsx b/packages/dev-tools-pages/ts/components/Code.tsx new file mode 100644 index 000000000..42d4234f1 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Code.tsx @@ -0,0 +1,114 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import BaseButton from './Button'; + +interface CodeProps { + children: React.ReactNode; + language?: string; +} + +interface CodeState { + hlCode?: string; + copied?: boolean; +} + +const Button = styled(BaseButton)` + opacity: 0; + position: absolute; + top: 1rem; + right: 1rem; + transition: opacity 0.2s; +`; + +const Base = + styled.div < + CodeProps > + ` + color: ${props => (props.language === undefined ? '#FFF' : 'inherit')}; + background-color: ${props => (props.language === undefined ? '#000' : '#F1F4F5')}; + white-space: ${props => (props.language === undefined ? 'nowrap' : '')}; + position: relative; + &:hover ${Button} { + opacity: 1; + } +`; + +const StyledCode = styled.code` + padding: 1.5rem; + display: block; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; +`; + +const StyledPre = styled.pre` + margin: 0; +`; + +const StyledCopyInput = styled.textarea` + height: 0; + position: absolute; + top: 0; + right: 0; + z-index: -1; +`; + +const CopyInput = StyledCopyInput as any; + +class Code extends React.Component<CodeProps, CodeState> { + code = React.createRef<HTMLTextAreaElement>(); + + state: CodeState = {}; + + constructor(props: CodeProps) { + super(props); + } + + async componentDidMount() { + const { language, children } = this.props; + + if (language !== undefined) { + const { highlight } = await import(/* webpackChunkName: 'highlight.js' */ 'highlight.js'); + const { value: hlCode } = highlight(language, children as string); + this.setState({ hlCode }); + } + } + + handleCopy = async () => { + try { + if ('clipboard' in navigator) { + await (navigator as any).clipboard.writeText(this.props.children); + this.setState({ copied: true }); + } else { + this.code.current.focus(); + this.code.current.select(); + document.execCommand('copy'); + this.setState({ copied: true }); + } + } catch (error) { + this.setState({ copied: false }); + } + }; + + render() { + const { language, children } = this.props; + + return ( + <Base language={language}> + <StyledPre> + {this.state.hlCode !== undefined ? ( + <StyledCode dangerouslySetInnerHTML={{ __html: this.state.hlCode }} /> + ) : ( + <StyledCode>{this.props.children}</StyledCode> + )} + </StyledPre> + <Button onClick={this.handleCopy}>Copy</Button> + {!('clipboard' in navigator) ? ( + <CopyInput readOnly aria-hidden="true" ref={this.code} value={children} /> + ) : null} + </Base> + ); + } +} + +export default Code; diff --git a/packages/dev-tools-pages/ts/components/Container.tsx b/packages/dev-tools-pages/ts/components/Container.tsx new file mode 100644 index 000000000..d6df7a0b4 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Container.tsx @@ -0,0 +1,9 @@ +import styled from 'styled-components'; + +const Container = styled.div` + max-width: 77.5rem; + width: calc(100% - 3.75rem); + margin: 0 auto; +`; + +export default Container; diff --git a/packages/dev-tools-pages/ts/components/ContentBlock.tsx b/packages/dev-tools-pages/ts/components/ContentBlock.tsx new file mode 100644 index 000000000..56d52a150 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/ContentBlock.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Beta } from './Typography'; + +const Base = styled.div` + display: flex; + align-items: flex-start; + justify-content: space-between; + &:not(:last-of-type) { + margin-bottom: 6.25rem; + } +`; + +const Content = styled.div` + width: 66.693548387%; +`; + +const Item = styled.div` + p { + max-width: 31.25rem; + } + + &:not(:last-of-type) { + margin-bottom: 2.5rem; + } +`; + +interface ContentBlockProps { + title: string; + children: React.ReactNode; +} + +function ContentBlock(props: ContentBlockProps) { + const children = React.Children.map(props.children, child => { + return <Item>{child}</Item>; + }); + + return ( + <Base> + <Beta>{props.title}</Beta> + <Content>{children}</Content> + </Base> + ); +} + +export default ContentBlock; diff --git a/packages/dev-tools-pages/ts/components/Footer.tsx b/packages/dev-tools-pages/ts/components/Footer.tsx new file mode 100644 index 000000000..82b2de1a3 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Footer.tsx @@ -0,0 +1,91 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { Alpha, Beta } from './Typography'; +import { withContext, Props } from './withContext'; +import Container from './Container'; + +import MainIcon from 'ts/icons/logos/0x.svg'; +import compiler from 'ts/context/compiler'; +import cov from 'ts/context/cov'; +import profiler from 'ts/context/profiler'; +import trace from 'ts/context/trace'; + +const tools = [trace, cov, compiler, profiler]; + +function Footer(props: Props) { + const { colors } = props; + + return ( + <StyledFooter background={colors.secondary}> + <Container> + <Top> + <Alpha>Other tools by 0x</Alpha> + <List> + {tools.map(({ title, subtitle, icon }) => ( + <ListItem as="li" key={title}> + <Icon as={icon} /> + <div> + <Beta>{title}</Beta> + <p>{subtitle}</p> + </div> + </ListItem> + ))} + </List> + </Top> + <Media as="aside"> + <Icon as={MainIcon} /> + <Small> + Built by 0x. 0x is an open, permissionless protocol allowing for ERC20 tokens to be traded on + the Ethereum blockchain. + </Small> + </Media> + </Container> + </StyledFooter> + ); +} + +const StyledFooter = styled.footer` + background-color: ${(props: { background: string }) => props.background}; + padding-top: 6.25rem; + padding-bottom: 5.4375rem; +`; + +const Top = styled.div` + display: flex; + justify-content: space-between; + margin-bottom: 9.375rem; +`; + +const Media = styled.div` + display: flex; + align-items: center; +`; + +const Icon = styled.div` + margin-right: 1.3125rem; +`; + +const List = styled.ul` + display: flex; + width: 66.693548387%; + flex-wrap: wrap; + flex-direction: row; + margin: 0; + padding: 0; +`; + +const ListItem = styled(Media)` + flex-basis: 50%; + margin-bottom: 3.3125rem; + :nth-last-of-type(-n + 2) { + margin-bottom: 0; + } +`; + +const Small = styled.small` + font-size: 1em; + max-width: 37.5rem; +`; + +export default withContext(Footer); diff --git a/packages/dev-tools-pages/ts/components/Header.tsx b/packages/dev-tools-pages/ts/components/Header.tsx new file mode 100644 index 000000000..46dce01eb --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Header.tsx @@ -0,0 +1,59 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; +import Container from './Container'; +import { Small } from './Typography'; + +function Header(props: Props) { + const { icon, title, colors } = props; + + return ( + <Container> + <StyledHeader> + <LogoMark> + <Logo as={icon} color={colors.main} /> + <Title>{title}</Title> + </LogoMark> + + <Link as="a" href="#"> + Built by 0x + </Link> + </StyledHeader> + </Container> + ); +} + +const StyledHeader = styled.header` + display: flex; + justify-content: space-between; + align-items: center; + padding-top: 3.75rem; + padding-bottom: 0.875rem; +`; + +const LogoMark = styled.div` + display: flex; + align-items: center; +`; + +const StyledLogo = styled.div` + color: ${props => props.color} + width: 1.75rem; + height: 1.75rem; +`; + +const Title = styled.h1` + font-size: 1.5rem; + margin: 0; + margin-left: 0.8125rem; +`; + +const StyledLink = styled(Small)` + color: inherit; +`; + +const Link = StyledLink as any; +const Logo = StyledLogo as any; + +export default withContext(Header); diff --git a/packages/dev-tools-pages/ts/components/Hero.tsx b/packages/dev-tools-pages/ts/components/Hero.tsx new file mode 100644 index 000000000..60f859a55 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Hero.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; +import Button from './Button'; +import { Beta } from './Typography'; + +function Hero(props: Props) { + const { subtitle, tagline } = props; + return ( + <StyledHero> + <Subtitle>{subtitle}</Subtitle> + <Tagline as="p">{tagline}</Tagline> + <Button as="a" href="#" large> + Read the Docs + </Button> + </StyledHero> + ); +} + +const StyledHero = styled.section` + margin: 0 auto; + text-align: center; + max-width: 590px; +`; + +const Subtitle = styled.h2` + font-size: 3.75rem; + line-height: 1.16; + margin-bottom: 1.5rem; +`; + +const Tagline = styled(Beta)` + margin-bottom: 2rem; +`; + +export default withContext(Hero); diff --git a/packages/dev-tools-pages/ts/components/InlineCode.tsx b/packages/dev-tools-pages/ts/components/InlineCode.tsx new file mode 100644 index 000000000..037cfa675 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/InlineCode.tsx @@ -0,0 +1,8 @@ +import styled from 'styled-components'; + +const InlineCode = styled.code` + background-color: #eceff9; + padding: 0.1875rem; +`; + +export default InlineCode; diff --git a/packages/dev-tools-pages/ts/components/List.tsx b/packages/dev-tools-pages/ts/components/List.tsx new file mode 100644 index 000000000..df1fdc53b --- /dev/null +++ b/packages/dev-tools-pages/ts/components/List.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +const StyledList = styled.ul` + list-style-type: none; + margin: 0; + padding-inline-start: 0.2rem; +`; + +const StyledItem = styled.li` + :before { + content: ''; + border: 1px solid black; + width: 0.6875rem; + height: 0.6875rem; + display: inline-block; + transform: rotate(45deg); + margin-right: 1.09375rem; + } +`; + +interface ListProps { + items: Array<string>; +} + +function List(props: ListProps) { + const items = props.items; + const listItems = items.map((bullet, index) => <StyledItem key={index}>{bullet}</StyledItem>); + + return <StyledList>{listItems}</StyledList>; +} + +export default List; diff --git a/packages/dev-tools-pages/ts/components/Main.tsx b/packages/dev-tools-pages/ts/components/Main.tsx new file mode 100644 index 000000000..8046abc91 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Main.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { withContext, Props } from './withContext'; + +import { Alpha } from './Typography'; + +const StyledMain = styled.div` + padding-top: 6.25rem; + padding-bottom: 6.25rem; +`; + +const Title = styled(Alpha)` + color: ${props => props.color}; + margin-bottom: 6.25rem; +`; + +interface MainProps extends Props { + children: React.ReactNode; +} + +function Main(props: MainProps) { + return ( + <StyledMain> + <Title as="h2" color={props.colors.main}> + Get started + </Title> + {props.children} + </StyledMain> + ); +} + +export default withContext(Main); diff --git a/packages/dev-tools-pages/ts/components/MetaTags.tsx b/packages/dev-tools-pages/ts/components/MetaTags.tsx new file mode 100644 index 000000000..9bb33f7ab --- /dev/null +++ b/packages/dev-tools-pages/ts/components/MetaTags.tsx @@ -0,0 +1,28 @@ +import * as React from 'react'; +import { Helmet } from 'react-helmet'; + +import { withContext, Props } from './withContext'; + +interface MetaTagsProps extends Props { + imgSrc?: string; +} + +function MetaTags(props: MetaTagsProps) { + const { title, imgSrc = '/images/og_image.png' } = props; + const description = props.tagline; + return ( + <Helmet> + <title>{props.title}</title> + <meta name="description" content={description} /> + <link rel="shortcut icon" href={`/favicons/${props.name}.ico`} /> + <meta property="og:title" content={title} /> + <meta property="og:description" content={description} /> + <meta property="og:type" content="website" /> + <meta property="og:image" content={imgSrc} /> + <meta name="twitter:site" content="@0xproject" /> + <meta name="twitter:image" content={imgSrc} /> + </Helmet> + ); +} + +export default withContext(MetaTags); diff --git a/packages/dev-tools-pages/ts/components/Tabs.tsx b/packages/dev-tools-pages/ts/components/Tabs.tsx new file mode 100644 index 000000000..1efbe1f61 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Tabs.tsx @@ -0,0 +1,79 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { Tabs as ReactTabs, Tab, TabList, TabPanel } from 'react-tabs' + +import {withContext, Props} from './withContext'; + +const StyledTabList = styled(TabList)` + text-transform: uppercase; + list-style: none; + margin: 0; + padding: 0; + overflow: hidden; +`; + +const StyledTab = styled(Tab)` + height: 2.5rem; + padding-left: 1rem; + padding-right: 1rem; + display: flex; + justify-content: space-around; + align-items: center; + float: left; + &:not(:first-of-type) { + margin-left: .25rem; + } + &:focus, &:hover { + color: red; + outline: 0; + } +`; + +const Root = styled.div<{primaryColor: string;}>` + ${StyledTab} { + background-color: ${props => props.primaryColor}; + } + ${StyledTab}[aria-selected="true"] { + background-color: #F1F2F7; + } +`; + +interface TabsProps extends Props { + children: React.ReactNode; +} + +function Tabs(props: TabsProps) { + return ( + <Root primaryColor={props.colors.secondary}> + <ReactTabs> + <StyledTabList> + { React.Children.map(props.children, child => { + const {props} = React.cloneElement(child as React.ReactElement<any>); + return <StyledTab>{props.title}</StyledTab> + }) } + </StyledTabList> + + { React.Children.map(props.children, child => ( + <TabPanel>{child}</TabPanel> + )) } + </ReactTabs> + </Root> + ) +} + +interface TabBlockProps { + title: string; + children: React.ReactNode; +} + +function TabBlock(props: TabBlockProps) { + return ( + <React.Fragment> + {props.children} + </React.Fragment> + ) +} + +const ContextTabs = withContext(Tabs); + +export {ContextTabs as Tabs, TabBlock};
\ No newline at end of file diff --git a/packages/dev-tools-pages/ts/components/Typography.tsx b/packages/dev-tools-pages/ts/components/Typography.tsx new file mode 100644 index 000000000..3ce18df3b --- /dev/null +++ b/packages/dev-tools-pages/ts/components/Typography.tsx @@ -0,0 +1,17 @@ +import styled from 'styled-components'; + +const Alpha = styled.h2` + font-size: 1.75rem; + line-height: 1; +`; + +const Beta = styled.h3` + font-size: 1.25rem; + line-height: 1.65; +`; + +const Small = styled.p` + font-size: 0.875rem; +`; + +export { Alpha, Beta, Small }; diff --git a/packages/dev-tools-pages/ts/components/meta_tags.tsx b/packages/dev-tools-pages/ts/components/meta_tags.tsx deleted file mode 100644 index f6c43d23f..000000000 --- a/packages/dev-tools-pages/ts/components/meta_tags.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import { Helmet } from 'react-helmet'; - -export interface MetaTagsProps { - title: string; - description: string; - imgSrc?: string; -} - -export const MetaTags: React.StatelessComponent<MetaTagsProps> = ({ title, description, imgSrc }) => ( - <Helmet> - <title>{title}</title> - <meta name="description" content={description} /> - <meta property="og:title" content={title} /> - <meta property="og:description" content={description} /> - <meta property="og:type" content="website" /> - <meta property="og:image" content={imgSrc} /> - <meta name="twitter:site" content="@0xproject" /> - <meta name="twitter:image" content={imgSrc} /> - </Helmet> -); - -MetaTags.defaultProps = { - imgSrc: '/images/og_image.png', -}; diff --git a/packages/dev-tools-pages/ts/components/ui/button.tsx b/packages/dev-tools-pages/ts/components/ui/button.tsx deleted file mode 100644 index 754eca40e..000000000 --- a/packages/dev-tools-pages/ts/components/ui/button.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { darken, saturate } from 'polished'; -import * as React from 'react'; -import styled from 'styled-components'; - -/** - * AN EXAMPLE OF HOW TO CREATE A STYLED COMPONENT USING STYLED-COMPONENTS - * SEE: https://www.styled-components.com/docs/basics#coming-from-css - */ -export interface ButtonProps { - backgroundColor?: string; - borderColor?: string; - width?: string; - padding?: string; - type?: string; - isDisabled?: boolean; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; - className?: string; -} - -const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => ( - <button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}> - {children} - </button> -); - -const darkenOnHoverAmount = 0.1; -const darkenOnActiveAmount = 0.2; -const saturateOnFocusAmount = 0.2; -export const Button = styled(PlainButton)` - cursor: ${props => (props.isDisabled ? 'default' : 'pointer')}; - transition: background-color, opacity 0.5s ease; - padding: ${props => props.padding}; - border-radius: 3px; - outline: none; - width: ${props => props.width}; - background-color: ${props => (props.backgroundColor ? props.backgroundColor : 'none')}; - border: ${props => (props.borderColor ? `1px solid ${props.backgroundColor}` : 'none')}; - &:hover { - background-color: ${props => - !props.isDisabled ? darken(darkenOnHoverAmount, props.backgroundColor) : ''} !important; - } - &:active { - background-color: ${props => (!props.isDisabled ? darken(darkenOnActiveAmount, props.backgroundColor) : '')}; - } - &:disabled { - opacity: 0.5; - } - &:focus { - background-color: ${props => saturate(saturateOnFocusAmount, props.backgroundColor)}; - } -`; - -Button.defaultProps = { - backgroundColor: 'red', - width: 'auto', - isDisabled: false, - padding: '1em 2.2em', -}; -Button.displayName = 'Button'; diff --git a/packages/dev-tools-pages/ts/components/ui/container.tsx b/packages/dev-tools-pages/ts/components/ui/container.tsx deleted file mode 100644 index f2ae68b70..000000000 --- a/packages/dev-tools-pages/ts/components/ui/container.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; - -type StringOrNum = string | number; - -export type ContainerTag = 'div' | 'span'; - -export interface ContainerProps { - marginTop?: StringOrNum; - marginBottom?: StringOrNum; - marginRight?: StringOrNum; - marginLeft?: StringOrNum; - padding?: StringOrNum; - paddingTop?: StringOrNum; - paddingBottom?: StringOrNum; - paddingRight?: StringOrNum; - paddingLeft?: StringOrNum; - backgroundColor?: string; - borderRadius?: StringOrNum; - maxWidth?: StringOrNum; - maxHeight?: StringOrNum; - width?: StringOrNum; - height?: StringOrNum; - minWidth?: StringOrNum; - minHeight?: StringOrNum; - isHidden?: boolean; - className?: string; - position?: 'absolute' | 'fixed' | 'relative' | 'unset'; - display?: 'inline-block' | 'block' | 'inline-flex' | 'inline'; - top?: string; - left?: string; - right?: string; - bottom?: string; - zIndex?: number; - Tag?: ContainerTag; - cursor?: string; - id?: string; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; - overflowX?: 'scroll' | 'hidden' | 'auto' | 'visible'; -} - -export const Container: React.StatelessComponent<ContainerProps> = props => { - const { children, className, Tag, isHidden, id, onClick, ...style } = props; - const visibility = isHidden ? 'hidden' : undefined; - return ( - <Tag id={id} style={{ ...style, visibility }} className={className} onClick={onClick}> - {children} - </Tag> - ); -}; - -Container.defaultProps = { - Tag: 'div', -}; - -Container.displayName = 'Container'; diff --git a/packages/dev-tools-pages/ts/components/ui/text.tsx b/packages/dev-tools-pages/ts/components/ui/text.tsx deleted file mode 100644 index 8e314beae..000000000 --- a/packages/dev-tools-pages/ts/components/ui/text.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import { colors } from '@0xproject/react-shared'; -import { darken } from 'polished'; -import * as React from 'react'; -import styled from 'styled-components'; - -export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i'; - -export interface TextProps { - className?: string; - Tag?: TextTag; - fontSize?: string; - fontFamily?: string; - fontStyle?: string; - fontColor?: string; - lineHeight?: string; - minHeight?: string; - center?: boolean; - fontWeight?: number | string; - textDecorationLine?: string; - onClick?: (event: React.MouseEvent<HTMLElement>) => void; - hoverColor?: string; - noWrap?: boolean; - display?: string; -} - -const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => ( - <Tag className={className} onClick={onClick}> - {children} - </Tag> -); - -export const Text = styled(PlainText)` - font-family: ${props => props.fontFamily}; - font-style: ${props => props.fontStyle}; - font-weight: ${props => props.fontWeight}; - font-size: ${props => props.fontSize}; - text-decoration-line: ${props => props.textDecorationLine}; - ${props => (props.lineHeight ? `line-height: ${props.lineHeight}` : '')}; - ${props => (props.center ? 'text-align: center' : '')}; - color: ${props => props.fontColor}; - ${props => (props.minHeight ? `min-height: ${props.minHeight}` : '')}; - ${props => (props.onClick ? 'cursor: pointer' : '')}; - transition: color 0.5s ease; - ${props => (props.noWrap ? 'white-space: nowrap' : '')}; - ${props => (props.display ? `display: ${props.display}` : '')}; - &:hover { - ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor || 'black')}` : '')}; - } -`; - -Text.defaultProps = { - fontFamily: 'Roboto', - fontStyle: 'normal', - fontWeight: 400, - fontColor: colors.black, - fontSize: '15px', - lineHeight: '1.5em', - textDecorationLine: 'none', - Tag: 'div', - noWrap: false, -}; - -Text.displayName = 'Text'; - -export const Title: React.StatelessComponent<TextProps> = props => <Text {...props} />; - -Title.defaultProps = { - Tag: 'h2', - fontSize: '20px', - fontWeight: 600, - fontColor: colors.black, -}; - -Title.displayName = 'Title'; diff --git a/packages/dev-tools-pages/ts/components/withContext.tsx b/packages/dev-tools-pages/ts/components/withContext.tsx new file mode 100644 index 000000000..d38c0afe4 --- /dev/null +++ b/packages/dev-tools-pages/ts/components/withContext.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; + +import ThemeContext from '../context'; + +interface Props { + title?: string; + name?: string; + subtitle?: string; + tagline?: string; + icon?: React.ReactNode; + colors?: any; +} + +function withContext(WrappedComponent: any) { + function ComponentWithContext(props: any) { + return <ThemeContext.Consumer>{data => <WrappedComponent {...data} {...props} />}</ThemeContext.Consumer>; + } + + return ComponentWithContext; +} + +export default withContext; +export { withContext, Props }; |