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

Switch to tabs for categories vs following

Browse Source
This commit is contained in:
James Grugett 2022-06-06 14:53:02 -05:00
parent d9eb9798e5
commit 849e7d03a8
2 changed files with 30 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
web/components/contract-search.tsx
View File

@ -22,10 +22,9 @@ import { Spacer } from './layout/spacer'
import { ENV } from 'common/envs/constants' import { ENV } from 'common/envs/constants'
import { useUser } from 'web/hooks/use-user' import { useUser } from 'web/hooks/use-user'
import { useFollows } from 'web/hooks/use-follows' import { useFollows } from 'web/hooks/use-follows'
import { ChoicesToggleGroup } from './choices-toggle-group'
import { EditCategoriesButton } from './feed/category-selector' import { EditCategoriesButton } from './feed/category-selector'
import { Col } from './layout/col'
import { CATEGORIES } from 'common/categories' import { CATEGORIES } from 'common/categories'
import { Tabs } from './layout/tabs'
const searchClient = algoliasearch( const searchClient = algoliasearch(
'GJQPAYENIF', 'GJQPAYENIF',
@ -271,28 +270,33 @@ function CategoryFollowSelector(props: {
const followingLabel = `Following ${follows.length}` const followingLabel = `Following ${follows.length}`
return ( return (
<Col className="gap-2"> <Tabs
<ChoicesToggleGroup defaultIndex={mode === 'categories' ? 0 : 1}
currentChoice={mode} tabs={[
choicesMap={{ {
[categoriesLabel]: 'categories', title: categoriesLabel,
[followingLabel]: 'following', content: user && (
}} <Row className="items-center gap-1 text-gray-500">
setChoice={(c) => setMode(c as 'categories' | 'following')} <div>{categoriesDescription}</div>
/> <EditCategoriesButton className="self-start" user={user} />
</Row>
),
},
...(user
? [
{
title: followingLabel,
{mode === 'categories' && user && ( content: (
<Row className="items-center gap-2 text-gray-500"> <Row className="h-8 items-center gap-2 text-gray-500">
<div>{categoriesDescription}</div> <div>Showing markets by users you are following.</div>
<EditCategoriesButton className="self-start" user={user} /> </Row>
</Row> ),
)} },
]
{mode === 'following' && user && ( : []),
<Row className="h-8 items-center gap-2 text-gray-500"> ]}
<div>Showing markets created by users you are following.</div> onClick={(_, index) => setMode(index === 0 ? 'categories' : 'following')}
</Row> />
)}
</Col>
) )
} }

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

@ -15,7 +15,7 @@ export function Tabs(props: {
tabs: Tab[] tabs: Tab[]
defaultIndex?: number defaultIndex?: number
className?: string className?: string
onClick?: (tabName: string) => void onClick?: (tabTitle: string, index: number) => void
}) { }) {
const { tabs, defaultIndex, className, onClick } = props const { tabs, defaultIndex, className, onClick } = props
const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0) const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
@ -34,7 +34,7 @@ export function Tabs(props: {
e.preventDefault() e.preventDefault()
} }
setActiveIndex(i) setActiveIndex(i)
onClick?.(tab.title) onClick?.(tab.title, i)
}} }}
className={clsx( className={clsx(
activeIndex === i activeIndex === i