zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

More obvious click area (#3528)

zio/stable
dan 2024-04-13 11:46:16 +01:00 committed by GitHub
parent acbadc610b
commit c3f75330ed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
bskyembed/src/components/post.tsx
View File

@ -31,7 +31,7 @@ export function Post({thread}: Props) {
return ( return (
<Container href={href}> <Container href={href}>
<div className="flex-1 flex-col flex gap-2" lang={record?.langs?.[0]}> <div className="flex-1 flex-col flex gap-2" lang={record?.langs?.[0]}>
<div className="flex gap-2.5 items-center"> <div className="flex gap-2.5 items-center cursor-pointer">
<Link href={`/profile/${post.author.did}`} className="rounded-full"> <Link href={`/profile/${post.author.did}`} className="rounded-full">
<div className="w-10 h-10 overflow-hidden rounded-full bg-neutral-300 shrink-0"> <div className="w-10 h-10 overflow-hidden rounded-full bg-neutral-300 shrink-0">
<img <img
@ -40,7 +40,7 @@ export function Post({thread}: Props) {
/> />
</div> </div>
</Link> </Link>
<div className="flex-1"> <div>
<Link <Link
href={`/profile/${post.author.did}`} href={`/profile/${post.author.did}`}
className="font-bold text-[17px] leading-5 line-clamp-1 hover:underline underline-offset-2 decoration-2"> className="font-bold text-[17px] leading-5 line-clamp-1 hover:underline underline-offset-2 decoration-2">
@ -52,6 +52,7 @@ export function Post({thread}: Props) {
<p>@{post.author.handle}</p> <p>@{post.author.handle}</p>
</Link> </Link>
</div> </div>
<div className="flex-1" />
<Link <Link
href={href} href={href}
className="transition-transform hover:scale-110 shrink-0 self-start"> className="transition-transform hover:scale-110 shrink-0 self-start">
@ -60,12 +61,14 @@ export function Post({thread}: Props) {
</div> </div>
<PostContent record={record} /> <PostContent record={record} />
<Embed content={post.embed} labels={post.labels} /> <Embed content={post.embed} labels={post.labels} />
<time <Link href={href}>
datetime={new Date(post.indexedAt).toISOString()} <time
className="text-textLight mt-1 text-sm"> datetime={new Date(post.indexedAt).toISOString()}
{niceDate(post.indexedAt)} className="text-textLight mt-1 text-sm hover:underline">
</time> {niceDate(post.indexedAt)}
<div className="border-t w-full pt-2.5 flex items-center gap-5 text-sm"> </time>
</Link>
<div className="border-t w-full pt-2.5 flex items-center gap-5 text-sm cursor-pointer">
{!!post.likeCount && ( {!!post.likeCount && (
<div className="flex items-center gap-2 cursor-pointer"> <div className="flex items-center gap-2 cursor-pointer">
<img src={likeIcon as string} className="w-5 h-5" /> <img src={likeIcon as string} className="w-5 h-5" />