56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import Masonry from 'react-masonry-css'
|
|
import { filterDefined } from 'common/util/array'
|
|
import { keyBy, uniqBy } from 'lodash'
|
|
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 { useTrendingContracts } from 'web/hooks/use-contracts'
|
|
import { useTopFollowedGroups } from 'web/hooks/use-group'
|
|
import { useUser } from 'web/hooks/use-user'
|
|
import { GroupCard } from '../groups'
|
|
|
|
export default function Explore() {
|
|
const user = useUser()
|
|
|
|
const topGroups = useTopFollowedGroups(200)
|
|
const groupsById = keyBy(topGroups, 'id')
|
|
|
|
const trendingContracts = useTrendingContracts(200)
|
|
|
|
const groupLinks = uniqBy(
|
|
(trendingContracts ?? []).map((c) => c.groupLinks ?? []).flat(),
|
|
(link) => link.groupId
|
|
)
|
|
const groups = filterDefined(
|
|
groupLinks.map((link) => groupsById[link.groupId])
|
|
).filter((group) => group.totalMembers >= 3)
|
|
|
|
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="Explore" />
|
|
</Row>
|
|
|
|
<Masonry
|
|
// Show only 1 column on tailwind's md breakpoint (768px)
|
|
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
|
|
className="mb-4 !min-w-[250px]"
|
|
group={g}
|
|
creator={null}
|
|
user={user}
|
|
isMember={false}
|
|
/>
|
|
))}
|
|
</Masonry>
|
|
</Col>
|
|
</Page>
|
|
)
|
|
}
|