@primer/components/lib-esm/TabNav.js

Primer react components

import classnames from 'classnames'; // eslint-disable-next-line import/no-namespace

import React from 'react';
import styled from 'styled-components';
import { get } from './constants';
import sx from './sx';
const ITEM_CLASS = 'TabNav-item';
const SELECTED_CLASS = 'selected';
const TabNavBase = styled.div.withConfig({
  displayName: "TabNav__TabNavBase",
  componentId: "sc-1xod0ow-0"
})(["margin-top:0;border-bottom:1px solid ", ";", ""], get('colors.border.default'), sx);
const TabNavBody = styled.nav.withConfig({
  displayName: "TabNav__TabNavBody",
  componentId: "sc-1xod0ow-1"
})(["display:flex;margin-bottom:-1px;overflow:auto;"]);

function TabNav({
  children,
  'aria-label': ariaLabel,
  ...rest
}) {
  return /*#__PURE__*/React.createElement(TabNavBase, rest, /*#__PURE__*/React.createElement(TabNavBody, {
    "aria-label": ariaLabel
  }, children));
}

TabNav.displayName = "TabNav";
const TabNavLink = styled.a.attrs(props => ({
  activeClassName: typeof props.to === 'string' ? 'selected' : '',
  className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className)
})).withConfig({
  displayName: "TabNav__TabNavLink",
  componentId: "sc-1xod0ow-2"
})(["padding:8px 12px;font-size:", ";line-height:20px;color:", ";text-decoration:none;background-color:transparent;border:1px solid transparent;border-bottom:0;&:hover,&:focus{color:", ";text-decoration:none;}&.selected{color:", ";border-color:", ";border-top-right-radius:", ";border-top-left-radius:", ";background-color:", ";}", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.fg.default'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('radii.2'), get('colors.canvas.default'), sx);
TabNavLink.displayName = 'TabNav.Link';
export default Object.assign(TabNav, {
  Link: TabNavLink
});