25ee793208
* Factor out section header * Remove daily balance change * Remove dead code * Layout, add streak * Fix visibility observer to work on server * Tweak * Search perserved by url * Add pill query param * Add search page * Extract component for ProbChangeRow * Explore groups page * Add search row * Add trending groups section * Add unfollow option for group * Experimental home: accommodate old saved sections. * Tweaks to search layout * Rearrange layout * Daily movers page * Add streak grayed out indicator * Use firebase query instead of algolia search for groups * Replace trending group card with pills * Hide streak if you turned off that notification * Listen for group updates * Better UI for adding / removing groups * Toast feedback for join/leave group. Customize button moved to bottom. * Remove Home title * Refactor arrange home * Add new for you section * Add prefetch * Move home out of experimental! * Remove unused import * Show non-public markets from group
42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
import Masonry from 'react-masonry-css'
|
|
import { Col } from 'web/components/layout/col'
|
|
import { Row } from 'web/components/layout/row'
|
|
import { Page } from 'web/components/page'
|
|
import { Title } from 'web/components/title'
|
|
import { useMemberGroupIds, useTrendingGroups } from 'web/hooks/use-group'
|
|
import { useUser } from 'web/hooks/use-user'
|
|
import { GroupCard } from './groups'
|
|
|
|
export default function Explore() {
|
|
const user = useUser()
|
|
const groups = useTrendingGroups()
|
|
const memberGroupIds = useMemberGroupIds(user) || []
|
|
|
|
return (
|
|
<Page>
|
|
<Col className="pm:mx-10 gap-4 px-4 pb-12 xl:w-[115%]">
|
|
<Row className={'w-full items-center justify-between'}>
|
|
<Title className="!mb-0" text="Trending groups" />
|
|
</Row>
|
|
|
|
<Masonry
|
|
breakpointCols={{ default: 3, 1200: 2, 570: 1 }}
|
|
className="-ml-4 flex w-auto self-center"
|
|
columnClassName="pl-4 bg-clip-padding"
|
|
>
|
|
{groups.map((g) => (
|
|
<GroupCard
|
|
key={g.id}
|
|
className="mb-4 !min-w-[250px]"
|
|
group={g}
|
|
creator={null}
|
|
user={user}
|
|
isMember={memberGroupIds.includes(g.id)}
|
|
/>
|
|
))}
|
|
</Masonry>
|
|
</Col>
|
|
</Page>
|
|
)
|
|
}
|