From f07107ad49cab9a2e68eb4a2ba5bab4c2556e401 Mon Sep 17 00:00:00 2001 From: Ian Philips Date: Thu, 5 May 2022 16:26:46 -0400 Subject: [PATCH] Allow linking to comments/markets in profile --- web/components/layout/tabs.tsx | 22 +++++++++++++++------- web/pages/[username]/index.tsx | 8 ++++++-- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/web/components/layout/tabs.tsx b/web/components/layout/tabs.tsx index 45b6a7d7..fc9dd775 100644 --- a/web/components/layout/tabs.tsx +++ b/web/components/layout/tabs.tsx @@ -1,6 +1,7 @@ import clsx from 'clsx' import Link from 'next/link' import { useState } from 'react' +import { Row } from './row' type Tab = { title: string @@ -10,8 +11,13 @@ type Tab = { href?: string } -export function Tabs(props: { tabs: Tab[]; defaultIndex?: number }) { - const { tabs, defaultIndex } = props +export function Tabs(props: { + tabs: Tab[] + defaultIndex?: number + className?: string + onClick?: (tabName: string) => void +}) { + const { tabs, defaultIndex, className, onClick } = props const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0) const activeTab = tabs[activeIndex] @@ -28,19 +34,21 @@ export function Tabs(props: { tabs: Tab[]; defaultIndex?: number }) { e.preventDefault() } setActiveIndex(i) + onClick?.(tab.title) }} className={clsx( activeIndex === i ? 'border-indigo-500 text-indigo-600' : '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} > - {tab.tabIcon ? ( - {tab.tabIcon} - ) : null} - {tab.title} + + {tab.tabIcon && {tab.tabIcon}} + {tab.title} + ))} diff --git a/web/pages/[username]/index.tsx b/web/pages/[username]/index.tsx index de88d52a..6dcd700e 100644 --- a/web/pages/[username]/index.tsx +++ b/web/pages/[username]/index.tsx @@ -9,7 +9,7 @@ import Custom404 from '../404' export default function UserProfile() { const router = useRouter() const [user, setUser] = useState('loading') - const { username } = router.query as { username: string } + const { username, tab } = router.query as { username: string; tab: string } useEffect(() => { if (username) { getUserByUsername(username).then(setUser) @@ -21,7 +21,11 @@ export default function UserProfile() { if (user === 'loading') return <> return user ? ( - + ) : ( )