Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 | 2x 2x 2x 2x 2x 2x 7x 7x | /*
* Copyright 2021 Harness Inc. All rights reserved.
* Use of this source code is governed by the PolyForm Shield 1.0.0 license
* that can be found in the licenses directory at the root of this repository, also available at
* https://polyformproject.org/wp-content/uploads/2020/06/PolyForm-Shield-1.0.0.txt.
*/
import React from 'react'
import { Drawer } from '@blueprintjs/core'
import { Layout, Button, Text } from '@wings-software/uicore'
import { Color } from '@harness/design-system'
import { useStrings } from 'framework/strings'
interface DrawerProps {
isOpen: boolean
setDrawerOpen: (state: boolean) => void
}
export const GetStarted: React.FC<DrawerProps> = props => {
const { getString } = useStrings()
return (
<Drawer
autoFocus={true}
enforceFocus={true}
hasBackdrop={true}
usePortal={true}
canOutsideClickClose={true}
canEscapeKeyClose={true}
isOpen={props.isOpen}
onClose={() => {
props.setDrawerOpen(false)
}}
size="500px"
style={{
// top: '85px',
boxShadow: 'rgb(40 41 61 / 4%) 0px 2px 8px, rgb(96 97 112 / 16%) 0px 16px 24px',
height: '100vh',
overflowY: 'scroll',
overflowX: 'hidden'
}}
>
<Layout.Vertical>
<Layout.Horizontal
padding="medium"
style={{ borderBottom: '1px solid var(--grey-200)', justifyContent: 'space-between', alignItems: 'center' }}
>
<Text font={{ size: 'medium', weight: 'semi-bold' }} color={Color.BLACK}>
{getString('dashboards.getStarted.title')}
</Text>
<Button icon="cross" minimal onClick={_ => props.setDrawerOpen(false)} />
</Layout.Horizontal>
<Layout.Vertical spacing="medium" padding="medium">
<Layout.Vertical spacing="large">
<Text font={{ size: 'medium' }} color={Color.GREY_900}>
{getString('dashboards.getStarted.video1Title')}
</Text>
<Text font={{ size: 'normal' }} color={Color.GREY_700}>
{getString('dashboards.getStarted.subTextVideo1')}
</Text>
<iframe
src="//fast.wistia.net/embed/iframe/38m8yricif"
scrolling="no"
allowFullScreen={true}
frameBorder={0}
className="wistia_embed"
name="wistia_embed"
width="470"
height="250"
></iframe>
</Layout.Vertical>
<Layout.Vertical spacing="large">
<Text font={{ size: 'medium' }} color={Color.GREY_900}>
{getString('dashboards.getStarted.video2Title')}
</Text>
<Text font={{ size: 'normal' }} color={Color.GREY_700}>
{getString('dashboards.getStarted.subTextVideo2')}
</Text>
<iframe
src="//fast.wistia.net/embed/iframe/xde7qsupzd"
scrolling="no"
allowFullScreen={true}
frameBorder={0}
className="wistia_embed"
name="wistia_embed"
width="470"
height="250"
></iframe>
</Layout.Vertical>
<Layout.Vertical spacing="large">
<Text font={{ size: 'medium' }} color={Color.GREY_900}>
{getString('dashboards.getStarted.video3Title')}
</Text>
<Text font={{ size: 'normal' }} color={Color.GREY_700}>
{getString('dashboards.getStarted.subTextVideo3')}
</Text>
<iframe
src="//fast.wistia.net/embed/iframe/ykdmbx7bfg"
scrolling="no"
allowFullScreen={true}
frameBorder={0}
className="wistia_embed"
name="wistia_embed"
width="470"
height="250"
></iframe>
</Layout.Vertical>
</Layout.Vertical>
</Layout.Vertical>
</Drawer>
)
}
|