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

Restyle /folds page

Browse Source
This commit is contained in:
Austin Chen 2022-02-03 10:47:26 -08:00
parent 6d6e127f7b
commit 193b9ae6bf
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/pages/folds.tsx
View File

@ -8,6 +8,7 @@ import { Col } from '../components/layout/col'
import { Row } from '../components/layout/row' import { Row } from '../components/layout/row'
import { Page } from '../components/page' import { Page } from '../components/page'
import { SiteLink } from '../components/site-link' import { SiteLink } from '../components/site-link'
import { TagsList } from '../components/tags-list'
import { Title } from '../components/title' import { Title } from '../components/title'
import { UserLink } from '../components/user-page' import { UserLink } from '../components/user-page'
import { useFolds } from '../hooks/use-fold' import { useFolds } from '../hooks/use-fold'
@ -63,7 +64,7 @@ export default function Folds(props: {
return ( return (
<Page> <Page>
<Col className="items-center"> <Col className="items-center">
<Col className="max-w-lg w-full"> <Col className="max-w-xl w-full">
<Col className="px-4 sm:px-0"> <Col className="px-4 sm:px-0">
<Row className="justify-between items-center"> <Row className="justify-between items-center">
<Title text="Explore communities" /> <Title text="Explore communities" />
@ -76,7 +77,7 @@ export default function Folds(props: {
</div> </div>
</Col> </Col>
<Col className="gap-2"> <Col className="gap-4">
{folds.map((fold) => ( {folds.map((fold) => (
<FoldCard <FoldCard
key={fold.id} key={fold.id}
@ -93,16 +94,17 @@ export default function Folds(props: {
function FoldCard(props: { fold: Fold; curator: User | undefined }) { function FoldCard(props: { fold: Fold; curator: User | undefined }) {
const { fold, curator } = props const { fold, curator } = props
const tags = fold.tags.slice(1)
return ( return (
<Col <Col
key={fold.id} key={fold.id}
className="bg-white hover:bg-gray-100 p-4 rounded-xl gap-1 shadow-md relative" className="bg-white hover:bg-gray-100 p-8 rounded-xl gap-1 shadow-md relative"
> >
<Link href={foldPath(fold)}> <Link href={foldPath(fold)}>
<a className="absolute left-0 right-0 top-0 bottom-0" /> <a className="absolute left-0 right-0 top-0 bottom-0" />
</Link> </Link>
<Row className="justify-between items-center gap-2"> <Row className="justify-between items-center gap-2">
<SiteLink href={foldPath(fold)}>{fold.name}</SiteLink> <span className="text-xl">{fold.name}</span>
<FollowFoldButton className="z-10 mb-1" fold={fold} /> <FollowFoldButton className="z-10 mb-1" fold={fold} />
</Row> </Row>
<Row className="items-center gap-2 text-gray-500 text-sm"> <Row className="items-center gap-2 text-gray-500 text-sm">
@ -118,6 +120,9 @@ function FoldCard(props: { fold: Fold; curator: User | undefined }) {
</Row> </Row>
</Row> </Row>
<div className="text-gray-500 text-sm">{fold.about}</div> <div className="text-gray-500 text-sm">{fold.about}</div>
{tags.length > 0 && (
<TagsList className="mt-4" tags={tags} noLink noLabel />
)}
</Col> </Col>
) )
} }