Fix analytics tabs on mobile

This commit is contained in:
James Grugett 2022-03-22 18:26:06 -05:00
parent c40c7af0b0
commit cbc01d8160

View File

@ -261,23 +261,6 @@ function Tabs(props: { tabs: Tab[]; defaultIndex: number }) {
return ( return (
<div> <div>
<div className="sm:hidden">
<label htmlFor="tabs" className="sr-only">
Select a tab
</label>
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
<select
id="tabs"
name="tabs"
className="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
defaultValue={activeTab.title}
>
{tabs.map((tab) => (
<option key={tab.title}>{tab.title}</option>
))}
</select>
</div>
<div className="hidden sm:block">
<nav className="flex space-x-4" aria-label="Tabs"> <nav className="flex space-x-4" aria-label="Tabs">
{tabs.map((tab) => ( {tabs.map((tab) => (
<a <a
@ -291,6 +274,7 @@ function Tabs(props: { tabs: Tab[]; defaultIndex: number }) {
)} )}
aria-current={tab.title === activeTab.title ? 'page' : undefined} aria-current={tab.title === activeTab.title ? 'page' : undefined}
onClick={(e) => { onClick={(e) => {
console.log('clicked')
e.preventDefault() e.preventDefault()
setActiveTab(tab) setActiveTab(tab)
}} }}
@ -299,7 +283,6 @@ function Tabs(props: { tabs: Tab[]; defaultIndex: number }) {
</a> </a>
))} ))}
</nav> </nav>
</div>
<div className="mt-4">{activeTab.content}</div> <div className="mt-4">{activeTab.content}</div>
</div> </div>