Display tags under posts

src/components/contentDisplay/feedPost/FeedPost.tsx

@@ -138,7 +138,7 @@ export default function FeedPost(props: Props) {
                   <PostEmbed content={post.post.embed} depth={0} />
                 )}
               </>
-            )}
+            )}            
             <div className="mt-2">
               <PostActions post={post.post} />
             </div>

src/components/dataDisplay/postTag/PostTag.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+
+interface Props {
+  tag: string;
+}
+
+export default function PostTag(props: Props) {
+  const { tag } = props;
+
+  const encodedTag = encodeURIComponent(tag);
+
+  return (
+    <Link
+      href={`/dashboard/search?query=%23${encodedTag}`}
+      className="bg-skin-tertiary px-3 py-1.5 rounded-lg text-sm text-skin-secondary font-medium hover:text-skin-base break-all"
+      onClick={(e) => e.stopPropagation()}
+    >
+      #{tag}
+    </Link>
+  );
+}

src/components/dataDisplay/postText/postText.tsx

@@ -7,6 +7,7 @@ import Link from "next/link";
 import { Fragment } from "react";
 import * as Tooltip from "@radix-ui/react-tooltip";
 import { BiLinkExternal } from "react-icons/bi";
+import PostTag from "../postTag/PostTag";
 
 interface Props {
   record: PostView["record"];
@@ -18,6 +19,7 @@ export default function PostText(props: Props) {
   const { record, truncate, mode = "feed" } = props;
   const text = AppBskyFeedPost.isRecord(record) && record.text;
   const facet = AppBskyFeedPost.isRecord(record) && record.facets;
+  const tags = AppBskyFeedPost.isRecord(record) && record.tags;
 
   const richText = new RichTextHelper({
     text: text.toString(),
@@ -119,6 +121,13 @@ export default function PostText(props: Props) {
       {content.map((segment, i) => (
         <Fragment key={`${i}+${text}`}>{segment.component}</Fragment>
       ))}
+      {tags && (
+        <div className="flex flex-wrap gap-2 mt-3">
+          {tags.map((t, i) => (
+            <PostTag key={i} tag={t} />
+          ))}
+        </div>
+      )}
     </div>
   );
 }

src/components/inputs/editor/Editor.tsx

@@ -126,7 +126,7 @@ export default function Editor(props: Props) {
     languages: languages.map((lang) => lang.code),
     images,
     label,
-    threadGate,
+    threadGate,    
   });
 
   if (!editor) return null;

src/lib/hooks/bsky/feed/usePublishPost.tsx

@@ -231,7 +231,7 @@ export default function usePublishPost(props: Props) {
         langs: lang,
         labels: selfLabels,
         reply: reply,
-        embed: embed,
+        embed: embed,              
       });
 
       // add threadGate