github.com/tilt-dev/tilt@v0.36.0/web/src/CustomNav.tsx (about)

     1  import React from "react"
     2  import styled from "styled-components"
     3  import {
     4    ApiButton,
     5    ApiButtonType,
     6    ApiIcon,
     7    buttonsForComponent,
     8    UIBUTTON_GLOBAL_COMPONENT_ID,
     9  } from "./ApiButton"
    10  import { MenuButtonLabeled, MenuButtonMixin } from "./GlobalNav"
    11  import { Color, SizeUnit } from "./style-helpers"
    12  
    13  type CustomNavProps = {
    14    view: Proto.webviewView
    15  }
    16  
    17  const CustomNavButton = styled(ApiButton)`
    18    height: 100%;
    19    align-items: center;
    20  
    21    button {
    22      ${MenuButtonMixin};
    23      height: 100%;
    24      box-shadow: unset;
    25      justify-content: center;
    26  
    27      &:hover,
    28      &:active {
    29        box-shadow: unset;
    30      }
    31    }
    32  
    33    .MuiButton-contained.Mui-disabled {
    34      color: ${Color.blue};
    35      background: transparent;
    36    }
    37    .apibtn-label {
    38      display: none;
    39    }
    40  `
    41  
    42  export function CustomNav(props: CustomNavProps) {
    43    const buttons = buttonsForComponent(
    44      props.view.uiButtons,
    45      ApiButtonType.Global,
    46      UIBUTTON_GLOBAL_COMPONENT_ID
    47    ).default
    48  
    49    return (
    50      <React.Fragment>
    51        {buttons.map((b) => (
    52          <MenuButtonLabeled label={b.spec?.text} key={b.metadata?.name}>
    53            <CustomNavButton
    54              uiButton={b}
    55              variant="contained"
    56              aria-label={b.spec?.text}
    57            >
    58              <ApiIcon
    59                iconName={b.spec?.iconName || "smart_button"}
    60                iconSVG={b.spec?.iconSVG}
    61              />
    62            </CustomNavButton>
    63          </MenuButtonLabeled>
    64        ))}
    65      </React.Fragment>
    66    )
    67  }