make post page

src/app/feed/components/PostItem.tsx

@@ -1,13 +1,15 @@
 import { Post, PostMedia } from '../posts/posts.ts'
 import { useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
 
 interface PostItemProps {
   post: Post
   addReaction: (emoji: string) => void
   clearReaction: (emoji: string) => void
+  hideViewButton?: boolean
 }
 
-export default function PostItem({ post, addReaction, clearReaction }: PostItemProps) {
+export default function PostItem({ post, addReaction, clearReaction, hideViewButton = false }: PostItemProps) {
   const formattedDate = post.createdAt.toLocaleString('en-US', {
     year: 'numeric',
     month: 'short',
@@ -31,6 +33,14 @@ export default function PostItem({ post, addReaction, clearReaction }: PostItemP
     <article className={`w-full p-4 ${opacity} transition-opacity duration-500`} key={post.postId}>
       <div className="text-sm text-gray-500 mb-3">
         <span className="text-gray-400 mr-2">@{post.authorName}</span>• {formattedDate}
+        {!hideViewButton && (
+          <>
+            {' • '}
+            <Link to={`/p/${post.postId}`} className="ml-2 text-primary-400 hover:underline">
+              View
+            </Link>
+          </>
+        )}
       </div>
 
       <div className="text-gray-800 mb-4 whitespace-pre-wrap">{post.content}</div>