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

Add more padding and improve layout of post card

Browse Source
This commit is contained in:
James Grugett 2022-10-12 11:59:27 -05:00
parent cee8caa3e8
commit e6a90e18e4
1 changed files with 26 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
web/components/post-card.tsx
View File

@ -8,6 +8,7 @@ import { fromNow } from 'web/lib/util/time'
import { Avatar } from './avatar' import { Avatar } from './avatar'
import { Card } from './card' import { Card } from './card'
import { CardHighlightOptions } from './contract/contracts-grid' import { CardHighlightOptions } from './contract/contracts-grid'
import { Col } from './layout/col'
import { Row } from './layout/row' import { Row } from './layout/row'
import { UserLink } from './user-link' import { UserLink } from './user-link'
@ -22,39 +23,39 @@ export function PostCard(props: {
return ( return (
<Card <Card
className={clsx( className={clsx(
'group relative flex gap-3 py-2 px-3', 'group relative flex gap-3 py-4 px-6',
itemIds?.includes(post.id) && highlightClassName itemIds?.includes(post.id) && highlightClassName
)} )}
> >
<Row className="flex grow justify-between"> <Row className="flex grow justify-between">
<div className=""> <Col className="gap-2">
<Row className="items-center text-sm "> <Row className="items-center justify-between">
<Avatar <Row className="items-center text-sm">
className="mx-1 h-7 w-7" <Avatar
username={post.creatorUsername} className="mx-1 h-7 w-7"
avatarUrl={post.creatorAvatarUrl} username={post.creatorUsername}
/> avatarUrl={post.creatorAvatarUrl}
<UserLink />
className=" text-gray-400" <UserLink
name={post.creatorName} className="text-gray-400"
username={post.creatorUsername} name={post.creatorName}
/> username={post.creatorUsername}
<span className="mx-1 text-gray-400">•</span> />
<span className="text-gray-400">{fromNow(post.createdTime)}</span> <span className="mx-1 text-gray-400">•</span>
<span className="text-gray-400">{fromNow(post.createdTime)}</span>
</Row>
<div className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
<DocumentIcon className={'h3 w-3'} />
Post
</div>
</Row> </Row>
<div className=" break-words text-lg font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2"> <div className="break-words text-lg font-semibold text-indigo-700 group-hover:underline group-hover:decoration-indigo-400 group-hover:decoration-2">
{post.title} {post.title}
</div> </div>
<div className="font-small text-md break-words text-gray-500"> <div className="font-small text-md break-words text-gray-500">
{post.subtitle} {post.subtitle}
</div> </div>
</div> </Col>
<div>
<span className="inline-flex items-center gap-1 whitespace-nowrap rounded-full bg-indigo-300 px-2 py-0.5 text-xs font-medium text-white">
<DocumentIcon className={'h3 w-3'} />
Post
</span>
</div>
</Row> </Row>
{onPostClick ? ( {onPostClick ? (
<a <a