shared/git/nav-header.tsx - master - githubmirror/client

shared/git/nav-header.tsx
86 строк2 KB
chrisnojima
refactor(styles): theme via hooks, no android remount (#29515)
08 авг 2026, 02:24
08 авг 2026, 02:24a41d38e
import * as C from '@/constants'
import * as Kb from '@/common-adapters'

export const HeaderTitle = () => {
  const styles = useStyles()
  const readHowUrlProps = Kb.useClickURL('https://keybase.io/blog/encrypted-git-for-everyone')
  return (
    <Kb.Box2
      direction="vertical"
      alignItems="flex-start"
      flex={1}
      style={styles.headerTitle}
      className="hover-underline-container"
    >
      <Kb.Text type="Header">Git repositories</Kb.Text>
      <Kb.Text type="BodySmall">
        All repositories are end-to-end encrypted.{' '}
        <Kb.Text
          type="BodySmall"
          {...readHowUrlProps}
          style={styles.headerTitleLink}
          className="hover-underline-child"
        >
          Read how it works.
        </Kb.Text>
      </Kb.Text>
    </Kb.Box2>
  )
}

export const HeaderRightActions = () => {
  const styles = useStyles()
  const navigateAppend = C.Router2.navigateAppend

  const makePopup = (p: Kb.Popup2Parms) => {
    const {attachTo, hidePopup} = p
    const onAddPersonal = () => {
      navigateAppend({name: 'gitNewRepo', params: {isTeam: false}})
    }
    const onAddTeam = () => {
      navigateAppend({name: 'gitNewRepo', params: {isTeam: true}})
    }

    return (
      <Kb.FloatingMenu
        attachTo={attachTo}
        closeOnSelect={true}
        visible={true}
        onHidden={hidePopup}
        position="bottom center"
        items={[
          {icon: 'iconfont-person', onClick: onAddPersonal, title: 'New personal repository'},
          {icon: 'iconfont-people', onClick: onAddTeam, title: 'New team repository'},
        ]}
      />
    )
  }

  const {showPopup, popup, popupAnchor} = Kb.usePopup2(makePopup)
  return (
    <>
      <Kb.Button
        label="New repository"
        onClick={showPopup}
        small={true}
        ref={popupAnchor}
        style={styles.newRepoButton}
      />
      {popup}
    </>
  )
}

const useStyles = Kb.Styles.createStyleHook(() => ({
  headerTitle: {
    paddingBottom: Kb.Styles.globalMargins.xtiny,
    paddingLeft: Kb.Styles.globalMargins.xsmall,
  },
  headerTitleLink: Kb.Styles.platformStyles({
    isElectron: {...Kb.Styles.desktopStyles.windowDraggingClickable, cursor: 'pointer'},
  }),
  newRepoButton: Kb.Styles.platformStyles({
    common: {alignSelf: 'flex-end', marginBottom: 6, marginRight: Kb.Styles.globalMargins.xsmall},
    isElectron: Kb.Styles.desktopStyles.windowDraggingClickable,
  }),
}))