open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix analytics tabs on mobile

Browse Source
This commit is contained in:
James Grugett 2022-03-22 18:26:06 -05:00
parent c40c7af0b0
commit cbc01d8160
1 changed files with 22 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
web/pages/analytics.tsx
View File

@ -261,45 +261,28 @@ function Tabs(props: { tabs: Tab[]; defaultIndex: number }) {
return (
<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">
{tabs.map((tab) => (
<a
key={tab.title}
href="#"
className={clsx(
tab.title === activeTab.title
? 'bg-gray-100 text-gray-700'
: 'text-gray-500 hover:text-gray-700',
'rounded-md px-3 py-2 text-sm font-medium'
)}
aria-current={tab.title === activeTab.title ? 'page' : undefined}
onClick={(e) => {
e.preventDefault()
setActiveTab(tab)
}}
>
{tab.title}
</a>
))}
</nav>
</div>
<nav className="flex space-x-4" aria-label="Tabs">
{tabs.map((tab) => (
<a
key={tab.title}
href="#"
className={clsx(
tab.title === activeTab.title
? 'bg-gray-100 text-gray-700'
: 'text-gray-500 hover:text-gray-700',
'rounded-md px-3 py-2 text-sm font-medium'
)}
aria-current={tab.title === activeTab.title ? 'page' : undefined}
onClick={(e) => {
console.log('clicked')
e.preventDefault()
setActiveTab(tab)
}}
>
{tab.title}
</a>
))}
</nav>
<div className="mt-4">{activeTab.content}</div>
</div>