115 lines
3.3 KiB
TypeScript
115 lines
3.3 KiB
TypeScript
import { track } from '@amplitude/analytics-browser'
|
|
import { DocumentIcon } from '@heroicons/react/solid'
|
|
import clsx from 'clsx'
|
|
import { Post } from 'common/post'
|
|
import Link from 'next/link'
|
|
import { useUserById } from 'web/hooks/use-user'
|
|
import { postPath } from 'web/lib/firebase/posts'
|
|
import { fromNow } from 'web/lib/util/time'
|
|
import { Avatar } from './avatar'
|
|
import { Card } from './card'
|
|
import { CardHighlightOptions } from './contract/contracts-grid'
|
|
import { UserLink } from './user-link'
|
|
|
|
export function PostCard(props: {
|
|
post: Post
|
|
onPostClick?: (post: Post) => void
|
|
highlightOptions?: CardHighlightOptions
|
|
}) {
|
|
const { post, onPostClick, highlightOptions } = props
|
|
const creatorId = post.creatorId
|
|
|
|
const user = useUserById(creatorId)
|
|
const { itemIds: itemIds, highlightClassName } = highlightOptions || {}
|
|
|
|
if (!user) return <> </>
|
|
|
|
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={user?.username} />
|
|
</div>
|
|
<div className="">
|
|
<div className="text-sm text-gray-500">
|
|
<UserLink
|
|
className="text-neutral"
|
|
name={user?.name}
|
|
username={user?.username}
|
|
/>
|
|
<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">
|
|
{post.title}
|
|
</div>
|
|
<div className="font-small text-md break-words text-gray-500">
|
|
{post.subtitle}
|
|
</div>
|
|
</div>
|
|
<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>
|
|
</Card>
|
|
{onPostClick ? (
|
|
<a
|
|
className="absolute top-0 left-0 right-0 bottom-0"
|
|
onClick={(e) => {
|
|
// Let the browser handle the link click (opens in new tab).
|
|
if (e.ctrlKey || e.metaKey) return
|
|
|
|
e.preventDefault()
|
|
track('select post card'),
|
|
{
|
|
slug: post.slug,
|
|
postId: post.id,
|
|
}
|
|
onPostClick(post)
|
|
}}
|
|
/>
|
|
) : (
|
|
<Link href={postPath(post.slug)}>
|
|
<a
|
|
onClick={() => {
|
|
track('select post card'),
|
|
{
|
|
slug: post.slug,
|
|
postId: post.id,
|
|
}
|
|
}}
|
|
className="absolute top-0 left-0 right-0 bottom-0"
|
|
/>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function PostCardList(props: {
|
|
posts: Post[]
|
|
highlightOptions?: CardHighlightOptions
|
|
onPostClick?: (post: Post) => void
|
|
}) {
|
|
const { posts, onPostClick, highlightOptions } = props
|
|
return (
|
|
<div className="w-full">
|
|
{posts.map((post) => (
|
|
<PostCard
|
|
key={post.id}
|
|
post={post}
|
|
onPostClick={onPostClick}
|
|
highlightOptions={highlightOptions}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|