diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2018-06-06 04:16:10 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-06-06 04:16:10 +0800 |
commit | e1b06bfce26c286b265ef47948216f9e4097477f (patch) | |
tree | 2f4600a7d289631963141f415bf5ac4572f1619c /packages/website/ts/components/ui/input.tsx | |
parent | 44a736c53b8901ee36dbe009ad570930bbc8e676 (diff) | |
parent | 8de3f03b4982f14459b10a0ef1d60ab713d5c7be (diff) | |
download | dexon-sol-tools-e1b06bfce26c286b265ef47948216f9e4097477f.tar dexon-sol-tools-e1b06bfce26c286b265ef47948216f9e4097477f.tar.gz dexon-sol-tools-e1b06bfce26c286b265ef47948216f9e4097477f.tar.bz2 dexon-sol-tools-e1b06bfce26c286b265ef47948216f9e4097477f.tar.lz dexon-sol-tools-e1b06bfce26c286b265ef47948216f9e4097477f.tar.xz dexon-sol-tools-e1b06bfce26c286b265ef47948216f9e4097477f.tar.zst dexon-sol-tools-e1b06bfce26c286b265ef47948216f9e4097477f.zip |
Merge pull request #652 from 0xProject/feature/website/landing-subscribe-button-2
Implement subscribe form on landing page
Diffstat (limited to 'packages/website/ts/components/ui/input.tsx')
-rw-r--r-- | packages/website/ts/components/ui/input.tsx | 43 |
1 files changed, 43 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/input.tsx b/packages/website/ts/components/ui/input.tsx new file mode 100644 index 000000000..e01a71a53 --- /dev/null +++ b/packages/website/ts/components/ui/input.tsx @@ -0,0 +1,43 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { styled } from 'ts/style/theme'; + +export interface InputProps { + className?: string; + value?: string; + width?: string; + fontSize?: string; + fontColor?: string; + placeholderColor?: string; + placeholder?: string; + backgroundColor?: string; + onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; +} + +const PlainInput: React.StatelessComponent<InputProps> = ({ value, className, placeholder, onChange }) => ( + <input className={className} value={value} onChange={onChange} placeholder={placeholder} /> +); + +export const Input = styled(PlainInput)` + font-size: ${props => props.fontSize}; + width: ${props => props.width}; + padding: 0.8em 1.2em; + border-radius: 3px; + font-family: 'Roboto Mono'; + color: ${props => props.fontColor}; + border: none; + background-color: ${props => props.backgroundColor}; + &::placeholder { + color: ${props => props.placeholderColor}; + } +`; + +Input.defaultProps = { + width: 'auto', + backgroundColor: colors.white, + fontColor: colors.darkestGrey, + placeholderColor: colors.darkGrey, + fontSize: '12px', +}; + +Input.displayName = 'Input'; |