feat(post): add pinned style and "announcement" tag

This commit is contained in:
plebeius.eth
2023-11-30 12:35:23 +01:00
parent bb9ecf3771
commit f41fe071e4
2 changed files with 14 additions and 2 deletions

View File

@@ -93,6 +93,15 @@
color: var(--link-visited);
}
.pinnedLink {
color: var(--text-secondary) !important;
font-weight: bold !important;
}
.announcement {
color: var(--text-secondary) !important;
}
.domain {
color: var(--text-info);
font-size: x-small;

View File

@@ -22,7 +22,7 @@ interface PostProps {
}
const Post = ({ post, index }: PostProps) => {
const { cid, content, downvoteCount, flair, link, linkHeight, linkWidth, replyCount, state, subplebbitAddress, timestamp, title, upvoteCount } = post || {};
const { cid, content, downvoteCount, flair, link, linkHeight, linkWidth, pinned, replyCount, state, subplebbitAddress, timestamp, title, upvoteCount } = post || {};
const { shortAuthorAddress, authorAddressChanged } = useAuthorAddress({ comment: post });
const subplebbit = useSubplebbit({ subplebbitAddress });
const { t } = useTranslation();
@@ -48,7 +48,7 @@ const Post = ({ post, index }: PostProps) => {
const pendingReplyCount = usePendingReplyCount({ parentCommentCid: cid });
const totalReplyCount = replyCount + pendingReplyCount;
const linkClass = isInPostView ? (link ? styles.externalLink : styles.internalLink) : styles.link;
const linkClass = `${isInPostView ? (link ? styles.externalLink : styles.internalLink) : styles.link} ${pinned ? styles.pinnedLink : ''}`;
return (
<div className={styles.container} key={index}>
@@ -128,6 +128,9 @@ const Post = ({ post, index }: PostProps) => {
</Link>
</>
)}
{pinned && (
<span className={styles.announcement}> - {t('announcement')}</span>
)}
</p>
<PostTools cid={cid} failed={state === 'failed'} replyCount={totalReplyCount} subplebbitAddress={subplebbitAddress} />
</div>