github.com/pluralsh/plural-cli@v0.9.5/pkg/ui/web/src/routes/nextsteps/NextSteps.tsx (about)

     1  import { Button, Codeline } from '@pluralsh/design-system'
     2  import React, { useCallback } from 'react'
     3  import { useNavigate } from 'react-router-dom'
     4  import styled from 'styled-components'
     5  
     6  import { Close, SetClipboard } from '../../../wailsjs/go/ui/Window'
     7  import { Routes } from '../routes'
     8  
     9  const NextSteps = styled(NextStepsUnstyled)(({ theme }) => ({
    10    height: '100%',
    11    display: 'flex',
    12    flexDirection: 'column',
    13    justifyContent: 'center',
    14    gap: theme.spacing.medium,
    15  
    16    '.title': {
    17      ...theme.partials.text.title2,
    18  
    19      display: 'flex',
    20      flexDirection: 'column',
    21      alignSelf: 'center',
    22      alignItems: 'center',
    23      textAlign: 'center',
    24      paddingBottom: theme.spacing.xxxlarge,
    25    },
    26  
    27    '.description': {
    28      ...theme.partials.text.body1,
    29  
    30      alignSelf: 'center',
    31    },
    32  
    33    '.codeline': {
    34      ...theme.partials.text.body2,
    35  
    36      paddingTop: theme.spacing.xxlarge,
    37    },
    38  
    39    '.actions': {
    40      display: 'flex',
    41      justifyContent: 'space-between',
    42      paddingTop: theme.spacing.xlarge,
    43    },
    44  }))
    45  
    46  function NextStepsUnstyled({ ...props }): React.ReactElement {
    47    const onClose = useCallback(Close, [])
    48    const onCopy = useCallback((text: string) => SetClipboard(text), [])
    49    const navigate = useNavigate()
    50  
    51    return (
    52      <div {...props}>
    53        <span className="title">
    54          <span>Almost done!</span>
    55          <span>Follow the next steps to complete your installations.</span>
    56        </span>
    57  
    58        <span className="codeline">Copy and run below command to build your applications:</span>
    59        <Codeline
    60          width="100%"
    61          onCopyClick={onCopy}
    62        >plural build
    63        </Codeline>
    64  
    65        <span className="codeline">Copy and run below command to deploy your applications:</span>
    66        <Codeline
    67          width="100%"
    68          onCopyClick={onCopy}
    69        >plural deploy --commit "Installed few apps with Plural"
    70        </Codeline>
    71  
    72        <div className="actions">
    73          <Button
    74            secondary
    75            onClick={() => navigate(Routes.Root)}
    76          >Install more
    77          </Button>
    78          <Button
    79            onClick={onClose}
    80          >Close
    81          </Button>
    82        </div>
    83      </div>
    84    )
    85  }
    86  
    87  export default NextSteps