diff options
author | Fred Carlsen <fred@sjelfull.no> | 2018-12-11 22:02:56 +0800 |
---|---|---|
committer | Fred Carlsen <fred@sjelfull.no> | 2018-12-11 23:11:08 +0800 |
commit | ec72a4b68c2e5dda3d77fdca9308f7ea75cf905d (patch) | |
tree | 0bd4efc8c9ccb9faeec9c81edb3bde72dca9175b /packages/website/ts/@next/components/newsletter_form.tsx | |
parent | 1f4af537c0bf4d8253590fd8c9f449b7a13805a9 (diff) | |
download | dexon-sol-tools-ec72a4b68c2e5dda3d77fdca9308f7ea75cf905d.tar dexon-sol-tools-ec72a4b68c2e5dda3d77fdca9308f7ea75cf905d.tar.gz dexon-sol-tools-ec72a4b68c2e5dda3d77fdca9308f7ea75cf905d.tar.bz2 dexon-sol-tools-ec72a4b68c2e5dda3d77fdca9308f7ea75cf905d.tar.lz dexon-sol-tools-ec72a4b68c2e5dda3d77fdca9308f7ea75cf905d.tar.xz dexon-sol-tools-ec72a4b68c2e5dda3d77fdca9308f7ea75cf905d.tar.zst dexon-sol-tools-ec72a4b68c2e5dda3d77fdca9308f7ea75cf905d.zip |
Rename form file
Diffstat (limited to 'packages/website/ts/@next/components/newsletter_form.tsx')
-rw-r--r-- | packages/website/ts/@next/components/newsletter_form.tsx | 160 |
1 files changed, 160 insertions, 0 deletions
diff --git a/packages/website/ts/@next/components/newsletter_form.tsx b/packages/website/ts/@next/components/newsletter_form.tsx new file mode 100644 index 000000000..3277f7f2e --- /dev/null +++ b/packages/website/ts/@next/components/newsletter_form.tsx @@ -0,0 +1,160 @@ +import * as React from 'react'; +import styled from 'styled-components'; + +import { colors } from 'ts/style/colors'; + +interface Props { +} + +interface InputProps { + isSubmitted: boolean; + name: string; + label: string; + type: string; +} + +interface ArrowProps { + isSubmitted: boolean; +} + +const Input: React.ReactNode = React.forwardRef((props: InputProps, ref) => { + const { name, label, type } = props; + const id = `input-${name}`; + + return ( + <InnerInputWrapper {...props}> + <label className="visuallyHidden" htmlFor={id}>{label}</label> + <StyledInput ref={ref} id={id} placeholder={label} {...props} /> + </InnerInputWrapper> + ); +}; + +export class NewsletterForm extends React.Component { + public emailInput = React.createRef(); + public state = { + isSubmitted: false, + }; + public render(): React.ReactNode { + const {isSubmitted} = this.state; + + return ( + <StyledForm onSubmit={this._onSubmit.bind(this)}> + <InputWrapper> + <Input isSubmitted={isSubmitted} name="email" type="email" label="Email Address" ref={this.emailInput} required /> + + <SubmitButton> + <Arrow isSubmitted={isSubmitted} width="22" height="17" fill="none" xmlns="http://www.w3.org/2000/svg"> + <path d="M13.066 0l-1.068 1.147 6.232 6.557H0v1.592h18.23l-6.232 6.557L13.066 17l8.08-8.5-8.08-8.5z" fill="#CBCBCB"/> + </Arrow> + </SubmitButton> + <SuccessText isSubmitted={isSubmitted}>🎉 Thank you for signing up!</SuccessText> + </InputWrapper> + <Text>Subscribe to our newsletter for updates in the 0x ecosystem</Text> + </StyledForm> + ); + } + + private async _onSubmit(e) { + e.preventDefault(); + + const email = this.emailInput.current.value; + + this.setState({ isSubmitted: true }); + + try { + const response = await fetch('/email', { + method: 'post', + headers: { + 'content-type': 'application/json; charset=utf-8', + }, + body: JSON.stringify({ email }), + }); + const json = await response.json(); + + console.log(response.json()); + } catch (e) { + console.log(e); + } + } +} + +const StyledForm = styled.form` + appearance: none; + border: 0; + color: ${colors.white}; + padding: 13px 0 14px; + margin-top: 27px; +`; + +const StyledInput = styled.input` + appearance: none; + background-color: transparent; + border: 0; + border-bottom: 1px solid #393939; + color: #fff; + font-size: 1.294117647rem; + padding: 15px 0; + outline: none; + width: 100%; + + &::placeholder { + color: #B1B1B1; // #9D9D9D on light theme + } +`; + +const InputWrapper = styled.div` + position: relative; +`; + +const InnerInputWrapper = styled.div<ArrowProps>` + opacity: ${props => props.isSubmitted && 0}; + visibility: ${props => props.isSubmitted && 'hidden'}; + transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; + transition-delay: 0.30s; +`; + +const SubmitButton = styled.button` + width: 44px; + height: 44px; + background-color: transparent; + border: 0; + position: absolute; + right: 0; + top: calc(50% - 22px); + overflow: hidden; + outline: 0; + + &:focus-within { + //background-color: #eee; + } +`; + +const Text = styled.p` + color: #656565; + font-size: 0.833333333rem; + font-weight: 300; + line-height: 1.2em; + margin-top: 15px; +`; + +const SuccessText = styled.p<ArrowProps>` + color: #B1B1B1; + font-size: 1rem; + font-weight: 300; + line-height: 1.2em; + padding-top: 25px; + position: absolute; + left: 0; + top: 0; + text-align: left; + right: 50px; + opacity: ${props => props.isSubmitted ? 1 : 0}; + visibility: ${props => props.isSubmitted ? 'visible' : 'hidden'}; + transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out; + transition-delay: 0.55s; +`; + +const Arrow = styled.svg<ArrowProps>` + transform: ${props => props.isSubmitted && `translateX(44px)`}; + transition: transform 0.25s ease-in-out; +`; |