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

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

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