vitess.io/vitess@v0.16.2/web/vtadmin/src/components/tabs/Tab.tsx (about)

     1  /**
     2   * Copyright 2021 The Vitess Authors.
     3   *
     4   * Licensed under the Apache License, Version 2.0 (the "License");
     5   * you may not use this file except in compliance with the License.
     6   * You may obtain a copy of the License at
     7   *
     8   *     http://www.apache.org/licenses/LICENSE-2.0
     9   *
    10   * Unless required by applicable law or agreed to in writing, software
    11   * distributed under the License is distributed on an "AS IS" BASIS,
    12   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13   * See the License for the specific language governing permissions and
    14   * limitations under the License.
    15   */
    16  import cx from 'classnames';
    17  import { LinkProps, NavLink } from 'react-router-dom';
    18  import { Pip, PipState } from '../pips/Pip';
    19  
    20  import style from './Tab.module.scss';
    21  
    22  interface Props {
    23      activeClassName?: string;
    24      className?: string;
    25      count?: number | null | undefined;
    26      status?: PipState;
    27      text: string;
    28      to: LinkProps['to'];
    29  }
    30  
    31  export const Tab = ({ activeClassName, className, count, status, text, to }: Props) => {
    32      return (
    33          <NavLink
    34              activeClassName={cx(style.active, activeClassName)}
    35              className={cx(style.tab, className)}
    36              role="tab"
    37              to={to}
    38          >
    39              {!!status && <Pip className={style.pip} state={status} />}
    40              {text}
    41              {typeof count === 'number' && <span className={style.count}>{count}</span>}
    42          </NavLink>
    43      );
    44  };