import { colors } from '@0xproject/react-shared'; import * as React from 'react'; import { Button } from 'ts/components/ui/button'; import { Container } from 'ts/components/ui/container'; import { IconButton } from 'ts/components/ui/icon_button'; import { Island } from 'ts/components/ui/island'; import { Pointer, PointerDirection } from 'ts/components/ui/pointer'; import { Text, Title } from 'ts/components/ui/text'; export type ContinueButtonDisplay = 'enabled' | 'disabled'; export interface OnboardingTooltipProps { title?: string; content: React.ReactNode; isLastStep: boolean; onClose: () => void; onClickNext: () => void; onClickBack: () => void; continueButtonDisplay?: ContinueButtonDisplay; shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; pointerDirection?: PointerDirection; continueButtonText?: string; className?: string; } export const OnboardingTooltip: React.StatelessComponent = ({ title, content, continueButtonDisplay, continueButtonText, onClickNext, onClickBack, onClose, shouldHideBackButton, shouldHideNextButton, pointerDirection, className, }) => (
{title} Close
{content} {continueButtonDisplay && ( )} {!shouldHideBackButton && ( Back )} {!shouldHideNextButton && ( Skip )}
); OnboardingTooltip.defaultProps = { pointerDirection: 'left', continueButtonText: 'Continue', }; OnboardingTooltip.displayName = 'OnboardingTooltip';