Refactor related posts component layout

thebkht · Nov 7, 2023 · b310938 · b310938
1 parent 99e7ae8
commit b310938
Showing 1 changed file with 14 additions and 18 deletions.
diff --git a/components/blog/related-posts.tsx b/components/blog/related-posts.tsx
@@ -7,25 +7,21 @@ export default function RelatedPosts({ posts, post, session }: { posts: any, pos
      return (
           <>
                <div className="max-w-[680px] mx-auto">
-                    <div className="md:mx-6 mx-2">
-                         <h2 className="text-2xl font-medium">Recommended from FalseNotes</h2>
-                         <div className="mt-14">
-                              <div className="flex items-stretch flex-wrap">
-                                   {
-                                        posts?.map((post: any) => (
-                                             <div className="w-full md:w-1/2" key={post.id}>
-                                                  <TagPostCard post={post} session={session} />
-                                             </div>
-                                        ))
-                                   }
-                              </div>
-                              <Separator className="mb-6" />
-                                   <Button variant={"outline"} className="w-full md:w-max" size={"lg"} asChild>
-                                        <Link href={`/feed`}>
-                                             See more recommendations
-                                        </Link>
-                                   </Button>
+                    <h2 className="text-2xl font-medium md:mx-6 mx-2">Recommended from FalseNotes</h2>
+                    <div className="mt-14">
+                         <div className="grid md:grid-cols-2 gap-4">
+                              {
+                                   posts?.map((post: any) => (
+                                        <TagPostCard post={post} session={session} key={post.id} />
+                                   ))
+                              }
                          </div>
+                         <Separator className="mb-6" />
+                         <Button variant={"outline"} className="w-full md:w-max" size={"lg"} asChild>
+                              <Link href={`/feed`}>
+                                   See more recommendations
+                              </Link>
+                         </Button>
                     </div>
                </div>
           </>