import React from 'react' ; import { Box , BoxProps } from '@blockstack/ui' ; export const InactiveTab = ( { children } ) => { return ( < Box color = "ink.400" mr = { 6 } py = { 3 } borderColor = "white" borderBottomWidth = "2px" cursor = "pointer" > { children } < /Box>); } ; export const ActiveTab = ( { children } ) => { return ( < Box color = "ink.900" mr = { 6 } py = { 3 } borderColor = "blue" borderBottomWidth = "2px" cursor = "pointer" > { children } < /Box>); } ; interface TabProps extends BoxProps { active : boolean ; } export const Tab = ( { active , ... rest } ) => { if ( active ) { return < ActiveTab { ... rest } / > ; } return < InactiveTab { ... rest } / > ; } ;