diff options
Diffstat (limited to 'packages/website/ts/components/onboarding/onboarding_tooltip.tsx')
-rw-r--r-- | packages/website/ts/components/onboarding/onboarding_tooltip.tsx | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx new file mode 100644 index 000000000..eb34a87f2 --- /dev/null +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -0,0 +1,56 @@ +import * as React from 'react'; + +import { colors } from '@0xproject/react-shared'; +import { Container } from 'ts/components/ui/container'; +import { Island } from 'ts/components/ui/island'; + +export type ContinueButtonDisplay = 'enabled' | 'disabled'; + +export interface OnboardingTooltipProps { + title?: string; + content: React.ReactNode; + isLastStep: boolean; + onClose: () => void; + onClickNext: () => void; + onClickBack: () => void; + continueButtonDisplay?: ContinueButtonDisplay; + hideBackButton?: boolean; + hideNextButton?: boolean; +} + +// TODO: Make this more general button. +export interface ContinueButtonProps { + display: ContinueButtonDisplay; + children?: string; + onClick: () => void; +} + +export const ContinueButton: React.StatelessComponent<ContinueButtonProps> = (props: ContinueButtonProps) => { + const isDisabled = props.display === 'disabled'; + return ( + <button disabled={isDisabled} onClick={isDisabled ? undefined : props.onClick}> + {props.children} + </button> + ); +}; + +export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => ( + <Island> + <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px"> + <div className="flex flex-column"> + {props.title} + {props.content} + {props.continueButtonDisplay && ( + <ContinueButton onClick={props.onClickNext} display={props.continueButtonDisplay}> + Continue + </ContinueButton> + )} + {!props.hideBackButton && <button onClick={props.onClickBack}>Back</button>} + {!props.hideNextButton && <button onClick={props.onClickNext}>Skip</button>} + <button onClick={props.onClose}>Close</button> + </div> + </Container> + </Island> +); + +OnboardingTooltip.displayName = 'OnboardingTooltip'; |