feat: add posts

app/routes/blog/EmptyState.tsx

@@ -0,0 +1,10 @@
+export function EmptyState() {
+  return (
+    <div className="mt-5 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" className="rounded-md" />
+    </div>
+  );
+}

app/routes/blog/Post.tsx

@@ -2,17 +2,31 @@ import { Link } from "@remix-run/react";
 
 type PostProps = {
   title: string;
-  description?: string;
-  href: string;
+  description: string | null;
+  id: string;
+  createdAt: string;
 };
 
-export function Post({ title, description, href }: PostProps) {
+export function Post({ title, description, id, createdAt }: 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 className="mt-5">
+      <div className="p-5 border-gray-600 border-2 rounded-lg">
+        <Link to={id}>
+          <div className="text-center">
+            <span className="text-[#ffff00] hover:text-[#e6c2bf] font-bold text-2xl">
+              {title}
+            </span>
+            <span className="ml-2 font-bold">{`(${new Date(
+              createdAt
+            ).toLocaleDateString()})`}</span>
+          </div>
+          {description && (
+            <div className="mt-5 italic text-xl max-w-3xl text-center">
+              {description}
+            </div>
+          )}
+        </Link>
+      </div>
     </div>
   );
 }

app/routes/blog/PostsWrapper.tsx

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

app/routes/blog/route.tsx

@@ -1,32 +1,22 @@
 import { Link, useLoaderData } from "@remix-run/react";
+import { findPosts } from "~/models/posts.server";
+import { EmptyState } from "./EmptyState";
 import { Post } from "./Post";
 import { PostsWrapper } from "./PostsWrapper";
 
 export const loader = async () => {
-  const posts: {
-    title: string;
-    description: string;
-    href: string;
-  }[] = [];
-
-  return posts;
+  return findPosts();
 };
 
 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 className="m-5 h-max flex flex-col items-center">
+      <div className="hover:text-[#e6c2bf] text-xl">
+        <Link to="/">Home</Link>
+      </div>
+      <div className="mt-5 lg:text-3xl">
+        <span>Here I blog about whatever get my attention</span>
       </div>
       {posts.length > 0 ? (
         <PostsWrapper>
@@ -35,12 +25,7 @@ export default function () {
           ))}
         </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" className="rounded" />
-        </div>
+        <EmptyState />
       )}
     </div>
   );