From f07107ad49cab9a2e68eb4a2ba5bab4c2556e401 Mon Sep 17 00:00:00 2001
From: Ian Philips <iansphilips@gmail.com>
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 ? (
-                  <span className="mr-2">{tab.tabIcon}</span>
-                ) : null}
-                {tab.title}
+                <Row className={'items-center justify-center gap-1'}>
+                  {tab.tabIcon && <span> {tab.tabIcon}</span>}
+                  {tab.title}
+                </Row>
               </a>
             </Link>
           ))}
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<User | null | 'loading'>('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 ? (
-    <UserPage user={user} currentUser={currentUser || undefined} />
+    <UserPage
+      user={user}
+      currentUser={currentUser || undefined}
+      defaultTabIndex={tab === 'Comments' || tab === 'comments' ? 1 : 0}
+    />
   ) : (
     <Custom404 />
   )