refactor: code refactor

app/components/Link.tsx

@@ -0,0 +1,11 @@
+import { Link as RemixLink } from "@remix-run/react";
+
+type LinkProps = React.PropsWithChildren<{ to: string }>;
+
+export function Link({ to, children }: LinkProps) {
+  return (
+    <RemixLink to={to} className="mt-5 hover:text-[#e6c2bf] text-xl font-bold">
+      {children}
+    </RemixLink>
+  );
+}

app/routes/blog/Post.tsx

@@ -9,25 +9,23 @@ type PostProps = {
 
 export function Post({ title, description, id, createdAt }: PostProps) {
   return (
-    <div className="w-full md:w-1/3">
+    <div className="mx-5 md:mx-0 md:w-1/2 lg:w-1/3">
-      <div className="mx-5 md:mx-0">
+      <div className="p-5 border-gray-600 border-2 rounded-lg">
-        <div className="p-5 border-gray-600 border-2 rounded-lg">
+        <Link to={id}>
-          <Link to={id}>
+          <div className="text-center font-bold">
-            <div className="text-center font-bold">
+            <span className="text-[#ffff00] hover:text-[#e6c2bf] text-2xl">
-              <span className="text-[#ffff00] hover:text-[#e6c2bf] text-2xl">
+              {title}
-                {title}
+            </span>
-              </span>
+            <span className="ml-2">{`(${new Date(
-              <span className="ml-2">{`(${new Date(
+              createdAt
-                createdAt
+            ).toLocaleDateString()})`}</span>
-              ).toLocaleDateString()})`}</span>
+          </div>
+          {description && (
+            <div className="mt-5 italic text-xl max-w-3xl text-center">
+              {description}
             </div>
-            {description && (
+          )}
-              <div className="mt-5 italic text-xl max-w-3xl text-center">
+        </Link>
-                {description}
-              </div>
-            )}
-          </Link>
-        </div>
       </div>
     </div>
   );

app/routes/blog/route.tsx

@@ -1,4 +1,5 @@
-import { Link, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
+import { Link } from "~/components/Link";
 import { findPosts } from "~/models/posts.server";
 import { EmptyState } from "./EmptyState";
 import { Post } from "./Post";
@@ -10,28 +11,16 @@ export const loader = async () => {
 export default function () {
   const posts = useLoaderData<typeof loader>();
   return (
-    <div className="h-fit flex flex-col items-center">
+    <div className="h-fit w-full flex flex-col items-center">
-      <div className="w-full">
+      <Link to="/">Home</Link>
-        <div className="flex flex-col items-center">
+      <div className="mt-5 mx-5 sm:mx-0 md:text-3xl text-[#ffff00] font-bold">
-          <div className="mt-5 hover:text-[#e6c2bf] lg:text-xl font-bold">
+        <span>Here I blog about whatever get my attention</span>
-            <Link to="/">Home</Link>
-          </div>
-        </div>
-      </div>
-      <div className="w-full">
-        <div className="flex flex-col items-center">
-          <div className="mt-5 mx-5 sm:mx-0 lg:text-3xl text-[#ffff00] font-bold">
-            <span>Here I blog about whatever get my attention</span>
-          </div>
-        </div>
       </div>
       {posts.length > 0 ? (
-        <div className="w-full">
+        <div className="mt-10 w-full flex flex-col items-center space-y-5">
-          <div className="mt-10 flex flex-col items-center space-y-5">
+          {posts.map((post, i) => (
-            {posts.map((post, i) => (
+            <Post {...post} key={i} />
-              <Post {...post} key={i} />
+          ))}
-            ))}
-          </div>
         </div>
       ) : (
         <EmptyState />

app/routes/blog_.$id.tsx

@@ -1,7 +1,8 @@
 import type { LoaderArgs } from "@remix-run/node";
-import { Link, useLoaderData } from "@remix-run/react";
+import { useLoaderData } from "@remix-run/react";
 import { getMDXComponent } from "mdx-bundler/client";
 import React from "react";
+import { Link } from "~/components/Link";
 import { findPost } from "~/models/posts.server";
 import { getMdxFile } from "~/utils/posts.server";
 
@@ -22,18 +23,13 @@ export const loader = async ({ params }: LoaderArgs) => {
 
 export default function () {
   const { post, code } = useLoaderData<typeof loader>();
-  const Component = React.useMemo(() => getMDXComponent(code), [code]);
+  const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
   return (
-    <div className="h-fit w-full flex flex-col items-center">
+    <div className="h-fit mb-5 w-full flex flex-col items-center">
-      <div className="mt-5 hover:text-[#e6c2bf] text-xl font-bold">
+      <Link to="/blog">Go Back</Link>
-        <Link to="/blog">Go back</Link>
-      </div>
       <div className="mt-5 text-[#ffff00] text-3xl font-bold">{post.title}</div>
-      <div className="m-3 lg:w-1/3 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
+      <div className="m-3 xl:w-1/2 prose dark:prose-invert prose-a:no-underline prose-a:font-bold">
-        <Component />
+        <MdxComponent />
-      </div>
-      <div className="mt-5 mb-5 hover:text-[#e6c2bf] text-xl font-bold">
-        <Link to="/blog">Go back</Link>
       </div>
     </div>
   );