import { Box , BoxProps , color , Stack } from '@stacks/ui' ; const TabButton = ( { isActive , label , ... rest } ) => { return ( < Box flexGrow = { 1 } px = "base" py = "tight" textAlign = "center" borderRadius = "8px" color = { isActive ? color ( 'text-title' ) : color ( 'text-caption' ) } fontSize = { 1 } fontWeight = { isActive ? 500 : 400 } as = "button" _hover = { ! isActive ? { color : color ( 'text-title' ) } : undefined } border = { 0 } position = "relative" zIndex = { 4 } { ... rest } > { label } < /Box>); } ; function BackgroundPill ( { alignment } ) { return ( < Box position = "absolute" height = "calc(100% - 8px)" width = "calc(50% - 4px)" bg = { color ( 'bg' ) } top = "4px" transition = "all 0.65s cubic-bezier(0.23, 1, 0.32, 1)" left = { 0 } transform = { alignment === 'start' ? 'translateX(4px)' : 'translateX(calc(100% + 4px))' } borderRadius = "8px" / > ) ; } interface Tabs { slug : string ; label : string ; } export function Tabs ( { tabs , activeTab , onTabClick , ... rest } ) { return ( < Stack position = "relative" isInline borderRadius = "12px" bg = { color ( 'bg-4' ) } p = "extra-tight" width = "100%" flexShrink = { 0 } { ... rest } > < BackgroundPill alignment = { activeTab === 0 ? 'start' : 'end' } /> < > { tabs . map ( ( tab , index ) => ( < TabButton onClick = { ( ) => onTabClick ( index ) } isActive = { activeTab === index } key = { tab . slug } label = { tab . label } / > ) ) } < /> < /Stack>); }