refactor: flatten routes

app/components/EmptyState.tsx

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

app/components/PostPreview.tsx

@@ -0,0 +1,26 @@
+import { SerializeFrom } from "@remix-run/node";
+import { Link } from "@remix-run/react";
+import { useFormattedDate } from "~/hooks";
+import type { Post } from "~/utils/posts.server";
+
+export function PostPreview({
+  title,
+  description,
+  filename,
+  published,
+}: SerializeFrom<Post>) {
+  const formattedDate = useFormattedDate(published);
+  return (
+    <div className="sm:w-full sm:px-5 lg:w-5/6 xl:w-1/3">
+      <Link to={filename}>
+        <div className="space-y-4 py-3 text-center font-bold border-gray-600 border-2 rounded-lg">
+          <div className="text-[#ffff00] text-2xl">{title}</div>
+          <div className="text-xl px-3">{description}</div>
+          <div>
+            <time>{formattedDate}</time>
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+}