refactor: flatten routes

app/routes/blog._index.tsx

@@ -1,8 +1,8 @@
 import { useLoaderData } from "@remix-run/react";
+import { EmptyState } from "~/components/EmptyState";
+import { PostPreview } from "~/components/PostPreview";
 import { Title } from "~/components/Title";
 import { findPosts } from "~/utils/posts.server";
-import { EmptyState } from "./EmptyState";
-import { PostPreview } from "./PostPreview";
 
 export const handle = {
   to: "/",

app/routes/blog._index/EmptyState.tsx

@@ -1,10 +0,0 @@
-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/routes/blog._index/PostPreview.tsx

@@ -1,26 +0,0 @@
-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>
-  );
-}

app/routes/blog.tsx

@@ -1,7 +1,7 @@
 import { Link } from "@remix-run/react";
 import { Outlet } from "react-router-dom";
 import { LinkWrapper } from "~/components/LinkWrapper";
-import { useMatch } from "./useMatch";
+import { useMatch } from "~/hooks/useMatch";
 
 export default function () {
   const { handle } = useMatch();

app/routes/blog/useMatch.ts

@@ -1,14 +0,0 @@
-import { useMatches } from "@remix-run/react";
-
-export function useMatch() {
-  const matches = useMatches();
-  const { handle, ...rest } = matches[matches.length - 1];
-
-  if (handle == null) {
-    throw new Error("Bruh");
-  }
-
-  return { handle, ...rest } as unknown as {
-    handle: { to: string; text: string };
-  };
-}