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

Make post-cards consistent with contract cards

Browse Source
This commit is contained in:
Pico2x 2022-10-12 17:21:58 +01:00
parent 8ae1166c49
commit fd7d4eb5e2
1 changed files with 18 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
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 { Row } from './layout/row'
import { UserLink } from './user-link' import { UserLink } from './user-link'
export function PostCard(props: { export function PostCard(props: {
@ -19,30 +20,28 @@ export function PostCard(props: {
const { itemIds: itemIds, highlightClassName } = highlightOptions || {} const { itemIds: itemIds, highlightClassName } = highlightOptions || {}
return ( return (
<div className="relative py-1">
<Card <Card
className={clsx( className={clsx(
'relative flex gap-3 py-2 px-3', 'group relative flex gap-3 py-2 px-3',
itemIds?.includes(post.id) && highlightClassName itemIds?.includes(post.id) && highlightClassName
)} )}
> >
<div className="flex-shrink-0"> <Row className="flex grow justify-between">
<Avatar className="h-12 w-12" username={post.creatorUsername} />
</div>
<div className=""> <div className="">
<div className="text-sm text-gray-500"> <Row className="items-center text-sm ">
<Avatar className="mx-1 h-7 w-7" username={post.creatorUsername} />
<UserLink <UserLink
className="text-neutral" className=" text-gray-400"
name={post.creatorName} name={post.creatorName}
username={post.creatorUsername} username={post.creatorUsername}
/> />
<span className="mx-1">•</span> <span className="mx-1 text-gray-400">•</span>
<span className="text-gray-500">{fromNow(post.createdTime)}</span> <span className="text-gray-400">{fromNow(post.createdTime)}</span>
</div> </Row>
<div className=" break-words text-lg font-medium text-gray-900"> <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-indigo-400">
{post.subtitle} {post.subtitle}
</div> </div>
</div> </div>
@ -52,7 +51,7 @@ export function PostCard(props: {
Post Post
</span> </span>
</div> </div>
</Card> </Row>
{onPostClick ? ( {onPostClick ? (
<a <a
className="absolute top-0 left-0 right-0 bottom-0" className="absolute top-0 left-0 right-0 bottom-0"
@ -83,7 +82,7 @@ export function PostCard(props: {
/> />
</Link> </Link>
)} )}
</div> </Card>
) )
} }