feat: add blog

app/routes/blog/Post.tsx

@@ -0,0 +1,18 @@
+import { Link } from "@remix-run/react";
+
+type PostProps = {
+  title: string;
+  description?: string;
+  href: string;
+};
+
+export function Post({ title, description, href }: PostProps) {
+  return (
+    <div className="mt-10">
+      <Link to={href}>
+        <div className="text-[#ffff00] font-bold text-2xl">{title}</div>
+        <div className="italic text-xl">{description}</div>
+      </Link>
+    </div>
+  );
+}

app/routes/blog/PostsWrapper.tsx

@@ -0,0 +1,3 @@
+export function PostsWrapper({ children }: React.PropsWithChildren) {
+  return <div className="px-10">{children}</div>;
+}

app/routes/blog/route.tsx

@@ -0,0 +1,47 @@
+import { Link, useLoaderData } from "@remix-run/react";
+import { Post } from "./Post";
+import { PostsWrapper } from "./PostsWrapper";
+
+export const loader = async () => {
+  const posts: {
+    title: string;
+    description: string;
+    href: string;
+  }[] = [];
+
+  return posts;
+};
+
+export default function () {
+  const posts = useLoaderData<typeof loader>();
+  return (
+    <div className="h-max">
+      <div className="mx-10 mt-10">
+        <div className="flex flex-col items-center">
+          <div className="text-3xl">
+            <span>Here I blog about whatever get my attention</span>
+          </div>
+        </div>
+        <div className="mt-5 flex flex-col items-end">
+          <Link to="/" className="hover:text-[#e6c2bf] text-xl">
+            Home
+          </Link>
+        </div>
+      </div>
+      {posts.length > 0 ? (
+        <PostsWrapper>
+          {posts.map((post) => (
+            <Post {...post} />
+          ))}
+        </PostsWrapper>
+      ) : (
+        <div className="flex flex-col items-center">
+          <div className="text-[#ffff00] font-bold">
+            I haven't post anything yet! So here's a pic of my cat
+          </div>
+          <img src="/cat.jpg" />
+        </div>
+      )}
+    </div>
+  );
+}