Allow linking to comments/markets in profile
This commit is contained in:
parent
ce62edbc8c
commit
f07107ad49
|
@ -1,6 +1,7 @@
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
|
import { Row } from './row'
|
||||||
|
|
||||||
type Tab = {
|
type Tab = {
|
||||||
title: string
|
title: string
|
||||||
|
@ -10,8 +11,13 @@ type Tab = {
|
||||||
href?: string
|
href?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export function Tabs(props: { tabs: Tab[]; defaultIndex?: number }) {
|
export function Tabs(props: {
|
||||||
const { tabs, defaultIndex } = props
|
tabs: Tab[]
|
||||||
|
defaultIndex?: number
|
||||||
|
className?: string
|
||||||
|
onClick?: (tabName: string) => void
|
||||||
|
}) {
|
||||||
|
const { tabs, defaultIndex, className, onClick } = props
|
||||||
const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
|
const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
|
||||||
const activeTab = tabs[activeIndex]
|
const activeTab = tabs[activeIndex]
|
||||||
|
|
||||||
|
@ -28,19 +34,21 @@ export function Tabs(props: { tabs: Tab[]; defaultIndex?: number }) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
}
|
}
|
||||||
setActiveIndex(i)
|
setActiveIndex(i)
|
||||||
|
onClick?.(tab.title)
|
||||||
}}
|
}}
|
||||||
className={clsx(
|
className={clsx(
|
||||||
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-4 px-1 text-sm font-medium'
|
'cursor-pointer whitespace-nowrap border-b-2 py-3 px-1 text-sm font-medium',
|
||||||
|
className
|
||||||
)}
|
)}
|
||||||
aria-current={activeIndex === i ? 'page' : undefined}
|
aria-current={activeIndex === i ? 'page' : undefined}
|
||||||
>
|
>
|
||||||
{tab.tabIcon ? (
|
<Row className={'items-center justify-center gap-1'}>
|
||||||
<span className="mr-2">{tab.tabIcon}</span>
|
{tab.tabIcon && <span> {tab.tabIcon}</span>}
|
||||||
) : null}
|
|
||||||
{tab.title}
|
{tab.title}
|
||||||
|
</Row>
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
))}
|
))}
|
||||||
|
|
|
@ -9,7 +9,7 @@ import Custom404 from '../404'
|
||||||
export default function UserProfile() {
|
export default function UserProfile() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const [user, setUser] = useState<User | null | 'loading'>('loading')
|
const [user, setUser] = useState<User | null | 'loading'>('loading')
|
||||||
const { username } = router.query as { username: string }
|
const { username, tab } = router.query as { username: string; tab: string }
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (username) {
|
if (username) {
|
||||||
getUserByUsername(username).then(setUser)
|
getUserByUsername(username).then(setUser)
|
||||||
|
@ -21,7 +21,11 @@ export default function UserProfile() {
|
||||||
if (user === 'loading') return <></>
|
if (user === 'loading') return <></>
|
||||||
|
|
||||||
return user ? (
|
return user ? (
|
||||||
<UserPage user={user} currentUser={currentUser || undefined} />
|
<UserPage
|
||||||
|
user={user}
|
||||||
|
currentUser={currentUser || undefined}
|
||||||
|
defaultTabIndex={tab === 'Comments' || tab === 'comments' ? 1 : 0}
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
<Custom404 />
|
<Custom404 />
|
||||||
)
|
)
|
||||||
|
|
Loading…
Reference in New Issue
Block a user