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

21
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,11 +31,13 @@ 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)}
aria-label="Tabs"
>
{tabs.map((tab, i) => ( {tabs.map((tab, i) => (
<Link href="#" key={tab.title} shallow={false}>
<a <a
href="#"
key={tab.title} key={tab.title}
onClick={(e) => { onClick={(e) => {
e.preventDefault() e.preventDefault()
@ -51,24 +51,19 @@ export function UncontrolledTabs(props: TabProps & { activeIndex: number }) {
activeIndex === i activeIndex === i
? 'border-indigo-500 text-indigo-600' ? 'border-indigo-500 text-indigo-600'
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700', : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
'cursor-pointer whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium', 'inline-flex cursor-pointer flex-row gap-1 whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium',
labelClassName labelClassName
)} )}
aria-current={activeIndex === i ? 'page' : undefined} aria-current={activeIndex === i ? 'page' : undefined}
> >
<Row className={'items-center justify-center gap-1'}> {tab.tabIcon && <span>{tab.tabIcon}</span>}
{tab.tabIcon && <span> {tab.tabIcon}</span>}
{tab.badge ? ( {tab.badge ? (
<div className="px-0.5 font-bold">{tab.badge}</div> <span className="px-0.5 font-bold">{tab.badge}</span>
) : null} ) : null}
{tab.title} {tab.title}
</Row>
</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>,
}, },
]} ]}
/> />