Grommet: Top and Bottom Tab activate the same content

Question

I'm wondering is there a way to set Tabs top and Bottom to display the tabs content using grommet tabs component:

example of what I am looking to do can be seen in the image below.
https://i.stack.imgur.com/d6YES.jpg

I have a sample codepen with a quick mock up.

code can be found in the codepen

http://codepen.io/Niall_Maher/pen/pProXW

Answer 1

There is not really a component that can do it, but you can add a second line of tabs with empty content that syncs with the first tabs and backwards, thanks to this properties on both tabs:

activeIndex={this.state.selectedIndex} 
onActive={i=>this.setState({selectedIndex:i})}

Checkout this:

Codepen here (: