import { Box , PillTabs } from '@bigcommerce/big-design' ; import React from 'react' ; import { ContentRoutingTabsProps } from './types' ; import { useContentRoutingTabs } from './useContentRoutingTabs' ; const RawContentRoutingTabs = ( { routes , id } ) => { const { activeContent , activePills , pills , handlePillClick } = useContentRoutingTabs ( routes , id ) ; return ( < > < PillTabs activePills = { activePills } items = { pills } onPillClick = { handlePillClick } / > < Box marginTop = "xSmall" > { activeContent ?. render ( ) } < /Box> < />); } ; export const ContentRoutingTabs = ( props ) => { if ( props . routes . length === 0 ) { return null ; } return < RawContentRoutingTabs { ... props } / > ; } ;