import { EuiBadge } from '@elastic/eui' ; import { i18n } from '@kbn/i18n' ; import React from 'react' ; import styled from 'styled-components' ; interface Props { label : string ; localStorageId : string ; } const LabelContainer = styled . span `
  max-width: 72%;
  float: left;
  &:hover,
  &:focus {
    text-decoration: underline;
  }
` ; const StyledBadge = styled ( EuiBadge ) `
  margin-left: 8px;
` ; param localStorageId function getBadgeVisibility ( localStorageId ) { const storedItem = window . localStorage . getItem ( localStorageId ) ; if ( storedItem ) { return JSON . parse ( storedItem ) as boolean ; } return true ; } param localStorageId export function hideBadge ( localStorageId ) { window . localStorage . setItem ( localStorageId , JSON . stringify ( false ) ) ; } export function NavNameWithBadge ( { label , localStorageId } ) { const isBadgeVisible = getBadgeVisibility ( localStorageId ) ; return ( < > < LabelContainer className = "eui-textTruncate" > < span > { label } < /span> < /LabelContainer> { isBadgeVisible && ( < StyledBadge color = "accent" > { i18n . translate ( 'xpack.observability.navigation.newBadge' , { defaultMessage : 'NEW' , } ) } < /StyledBadge>)} < />); }