Image page added

src/components/pages/post/post-page.tsx

@@ -6,7 +6,24 @@ type PostPageProps = {
 };
 
 const PostPage: React.FC<PostPageProps> = ({ post }) => {
-  return <div>{post.title}</div>;
+  return (
+    <div className="grid grid-cols-3">
+      <div id="left"></div>
+      <div id="centre">
+        <div className="flex max-w-lg flex-col justify-center">
+          <img
+            src={post.imageUrl}
+            className="w-full overflow-hidden rounded-lg border shadow"
+          />
+          <div className="mt-8">
+            <h4 className="text-xl font-bold">{post.title}</h4>
+            <p className="mt-2 text-gray-600">{post.description}</p>
+          </div>
+        </div>
+      </div>
+      <div id="right"></div>
+    </div>
+  );
 };
 
 export default PostPage;

src/components/trending-images.tsx

@@ -19,7 +19,7 @@ export const TrendingImages: React.FC = async () => {
   return latestImages.length !== 0 ? (
     <div className="masonry sm:masonry-sm md:masonry-md">
       {latestImages.map((image) => (
-        <Link href={`/image/${image.slug}`} key={image.slug}>
+        <Link href={`/post/${image.slug}`} key={image.slug}>
           <div className="break-inside rounded-lg">
             <div className="relative m-6 flex-shrink-0 overflow-hidden rounded-lg bg-muted shadow-lg hover:bg-accent">
               <div className="relative flex items-center justify-center px-2 pt-4">