jsx import { CSSObject , jsx } from '@emotion/core' ; import { QueryKeys , media } from '../../mediaQueries' ; import { LinkProps , filterLinkProps , linkStyle } from '../../Text' ; import { filterProps } from '../../util' ; import type { Theme } from '../Theme' ; import { DESKTOP_HEADER_SUB_MENU_CLASSNAME } from './HeaderSubMenu' ; export interface MenuLinkProps < T = HTMLAnchorElement > extends LinkProps < T > { button ? : boolean ; } export const menuLinkStyle = ( theme , { bold = true , color = theme . general . color , fontSize = '11px' , textTransform = 'uppercase' , button = false , ... props } ) => ( { ... linkStyle ( theme , { bold , color , fontSize , textTransform , ... props } ) , [ media [ QueryKeys . DESKTOP ] ] : { '&:first-of-type' : { marginLeft : 0 , } , '&:last-of-type' : { marginRight : 0 , } , margin : '0 26px 0 10px' , [ `.${ DESKTOP_HEADER_SUB_MENU_CLASSNAME } &` ] : { '&:first-of-type' : { marginLeft : '10px' , } , '&:last-of-type' : { marginRight : '26px' , } , } , } , [ media [ QueryKeys . TABLET_DOWN ] ] : { border : 'none' , fontSize : '32px !important' , fontWeight : 300 , maxWidth : '480px' , padding : '8px 24px' , textTransform : 'none !important' , } , border : button ? '1px solid rgb(219, 226, 231)' : undefined , borderRadius : button ? '4px' : undefined , padding : button ? '10px 16px' : undefined , } ) ; export const MENU_LINK_CLASSNAME = 'menu-link' ; export const filterMenuLinkProps = ( props ) => filterProps ( filterLinkProps ( props ) as MenuLinkProps , [ 'button' ] ) ; export const MenuLink = ( props ) => ( < a className = { MENU_LINK_CLASSNAME } css = { theme => menuLinkStyle ( theme , props ) } { ... filterMenuLinkProps ( props ) } />);