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

Clean up crufty markup in tabs component

Browse Source
This commit is contained in:
Marshall Polaris 2022-07-24 14:56:23 -07:00
parent 1942b02947
commit 0fe1da150f
2 changed files with 39 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
web/components/layout/tabs.tsx
View File

@ -1,8 +1,6 @@
import clsx from 'clsx' import clsx from 'clsx'
import Link from 'next/link'
import { useRouter, NextRouter } from 'next/router' import { useRouter, NextRouter } from 'next/router'
import { ReactNode, useState } from 'react' import { ReactNode, useState } from 'react'
import { Row } from './row'
import { track } from '@amplitude/analytics-browser' import { track } from '@amplitude/analytics-browser'
type Tab = { type Tab = {
@ -33,42 +31,39 @@ export function UncontrolledTabs(props: TabProps & { activeIndex: number }) {
const activeTab = tabs[activeIndex] as Tab | undefined // can be undefined in weird case const activeTab = tabs[activeIndex] as Tab | undefined // can be undefined in weird case
return ( return (
<> <>
<div className={clsx('mb-4 border-b border-gray-200', className)}> <nav
<nav className="-mb-px flex space-x-8" aria-label="Tabs"> className={clsx('mb-4 space-x-8 border-b border-gray-200', className)}
{tabs.map((tab, i) => ( aria-label="Tabs"
<Link href="#" key={tab.title} shallow={false}> >
<a {tabs.map((tab, i) => (
key={tab.title} <a
onClick={(e) => { href="#"
e.preventDefault() key={tab.title}
track('Clicked Tab', { onClick={(e) => {
title: tab.title, e.preventDefault()
currentPage: currentPageForAnalytics, track('Clicked Tab', {
}) title: tab.title,
onClick?.(tab.title, i) currentPage: currentPageForAnalytics,
}} })
className={clsx( onClick?.(tab.title, i)
activeIndex === i }}
? 'border-indigo-500 text-indigo-600' className={clsx(
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700', activeIndex === i
'cursor-pointer whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium', ? 'border-indigo-500 text-indigo-600'
labelClassName : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
)} 'inline-flex cursor-pointer flex-row gap-1 whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium',
aria-current={activeIndex === i ? 'page' : undefined} labelClassName
> )}
<Row className={'items-center justify-center gap-1'}> aria-current={activeIndex === i ? 'page' : undefined}
{tab.tabIcon && <span> {tab.tabIcon}</span>} >
{tab.badge ? ( {tab.tabIcon && <span>{tab.tabIcon}</span>}
<div className="px-0.5 font-bold">{tab.badge}</div> {tab.badge ? (
) : null} <span className="px-0.5 font-bold">{tab.badge}</span>
{tab.title} ) : null}
</Row> {tab.title}
</a> </a>
</Link> ))}
))} </nav>
</nav>
</div>
{activeTab?.content} {activeTab?.content}
</> </>
) )

10
web/components/user-page.tsx
View File

@ -280,9 +280,9 @@ export function UserPage(props: { user: User; currentUser?: User }) {
title: 'Markets', title: 'Markets',
content: <CreatorContractsList creator={user} />, content: <CreatorContractsList creator={user} />,
tabIcon: ( tabIcon: (
<div className="px-0.5 font-bold"> <span className="px-0.5 font-bold">
{usersContracts.length} {usersContracts.length}
</div> </span>
), ),
}, },
{ {
@ -295,7 +295,9 @@ export function UserPage(props: { user: User; currentUser?: User }) {
/> />
), ),
tabIcon: ( tabIcon: (
<div className="px-0.5 font-bold">{usersComments.length}</div> <span className="px-0.5 font-bold">
{usersComments.length}
</span>
), ),
}, },
{ {
@ -313,7 +315,7 @@ export function UserPage(props: { user: User; currentUser?: User }) {
/> />
</div> </div>
), ),
tabIcon: <div className="px-0.5 font-bold">{betCount}</div>, tabIcon: <span className="px-0.5 font-bold">{betCount}</span>,
}, },
]} ]}
/> />