github.com/pluralsh/plural-cli@v0.9.5/pkg/ui/web/src/layout/Header.tsx (about)

     1  import { Button, CloseIcon, PluralLogoFull } from '@pluralsh/design-system'
     2  import React, { useCallback } from 'react'
     3  import styled from 'styled-components'
     4  
     5  import { Close } from '../../wailsjs/go/ui/Window'
     6  
     7  const Header = styled(HeaderUnstyled)(({ theme }) => ({
     8    // Make window draggable via header
     9    ...theme.partials.draggable,
    10  
    11    // Layout
    12    display: 'flex',
    13    alignItems: 'center',
    14    justifyContent: 'space-between',
    15  
    16    // Spacing
    17    padding: `${theme.spacing.medium}px ${theme.spacing.large}px`,
    18  
    19    // Theming
    20    background: theme.colors['fill-one'],
    21    borderBottom: theme.borders.default,
    22  }))
    23  
    24  function HeaderUnstyled({ ...props }): React.ReactElement {
    25    const onClose = useCallback(Close, [])
    26  
    27    return (
    28      <div {...props}>
    29        <PluralLogoFull
    30          color="white"
    31          height={24}
    32        />
    33        <Button
    34          secondary
    35          small
    36          width={24}
    37          height={24}
    38          onClick={onClose}
    39        ><CloseIcon />
    40        </Button>
    41      </div>
    42    )
    43  }
    44  
    45  export default Header