refactor: code refactor

app/routes/blog._index/Post.tsx

@@ -1,4 +1,5 @@
 import { Link } from "@remix-run/react";
+import { BlogWrapper } from "~/components/BlogWrapper";
 
 type PostProps = {
   filename: string;
@@ -9,24 +10,18 @@ type PostProps = {
 
 export function Post({ title, description, filename, published }: PostProps) {
   return (
-    <div className="mx-5 md:mx-0 md:w-1/2 lg:w-1/3">
-      <div className="p-5 border-gray-600 border-2 rounded-lg">
+    <BlogWrapper>
+      <div className="p-5 text-center font-bold border-gray-600 border-2 rounded-lg">
         <Link to={filename}>
-          <div className="text-center font-bold">
-            <span className="text-[#ffff00] hover:text-[#e6c2bf] md:text-2xl">
-              {title}
-            </span>
-            <span className="ml-2">{`(${new Date(
-              published
-            ).toLocaleDateString()})`}</span>
-          </div>
-          {description && (
-            <div className="mt-5 italic md:text-xl max-w-3xl text-center">
-              {description}
-            </div>
-          )}
+          <span className="text-[#ffff00] hover:text-[#e6c2bf] text-2xl">
+            {title}
+          </span>
+          <span className="ml-2">{`(${new Date(
+            published,
+          ).toLocaleDateString()})`}</span>
+          {description && <div className="mt-5 text-xl">{description}</div>}
         </Link>
       </div>
-    </div>
+    </BlogWrapper>
   );
 }

app/routes/blog._index/route.tsx

@@ -9,7 +9,7 @@ export const handle = {
   text: "Home",
 };
 
-export const loader = async () => {
+export const loader = () => {
   return findPosts();
 };
 
@@ -19,11 +19,7 @@ export default function () {
     <>
       <Title>Here I blog about whatever get my attention</Title>
       {posts.length > 0 ? (
-        <div className="py-10 w-full sm:flex sm:flex-col sm:items-center space-y-5">
-          {posts.map((post, i) => (
-            <Post {...post} key={i} />
-          ))}
-        </div>
+        posts.map((post, i) => <Post {...post} key={i} />)
       ) : (
         <EmptyState />
       )}