refactor: code refactor

app/routes/blog._index/EmptyState.tsx

@@ -1,7 +1,7 @@
 export function EmptyState() {
   return (
-    <div className="mt-5 mx-5 flex flex-col items-center">
-      <div className="mb-5 font-bold">
+    <div className="mx-5 flex flex-col items-center">
+      <div className="font-bold">
         I haven't post anything yet! So here's a pic of my cat
       </div>
       <img src="/cat.jpg" className="rounded-md" />

app/routes/blog._index/Post.tsx

@@ -11,8 +11,8 @@ type PostProps = {
 export function Post({ title, description, filename, published }: PostProps) {
   return (
     <BlogWrapper>
-      <div className="p-5 text-center font-bold border-gray-600 border-2 rounded-lg">
-        <Link to={filename}>
+      <Link to={filename}>
+        <div className="p-5 text-center font-bold border-gray-600 border-2 rounded-lg">
           <span className="text-[#ffff00] hover:text-[#e6c2bf] text-2xl">
             {title}
           </span>
@@ -20,8 +20,8 @@ export function Post({ title, description, filename, published }: PostProps) {
             published,
           ).toLocaleDateString()})`}</span>
           {description && <div className="mt-5 text-xl">{description}</div>}
-        </Link>
-      </div>
+        </div>
+      </Link>
     </BlogWrapper>
   );
 }

app/routes/blog._index/route.tsx

@@ -16,13 +16,13 @@ export const loader = () => {
 export default function () {
   const posts = useLoaderData<typeof loader>();
   return (
-    <>
+    <div className="space-y-5">
       <Title>Here I blog about whatever get my attention</Title>
       {posts.length > 0 ? (
         posts.map((post, i) => <Post {...post} key={i} />)
       ) : (
         <EmptyState />
       )}
-    </>
+    </div>
   );
 }