refactor: code refactor

app/routes/blog.$file.tsx

@@ -3,7 +3,9 @@ import { Link, useLoaderData } from "@remix-run/react";
 import { getMDXComponent } from "mdx-bundler/client/index.js";
 import React from "react";
 import { FaEdit } from "react-icons/fa";
+import { Notbyai } from "~/components/Notbyai";
 import { Title } from "~/components/Title";
+import { useFormattedDate } from "~/hooks";
 import { getMdxFile } from "~/utils/posts.server";
 
 export const handle = {
@@ -47,19 +49,24 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
 export default function () {
   const {
     code,
-    frontmatter: { title },
+    frontmatter: { title, published },
     file,
   } = useLoaderData<typeof loader>();
+  const formattedDate = useFormattedDate(published);
   const MdxComponent = React.useMemo(() => getMDXComponent(code), [code]);
 
   return (
-    <div className="space-y-6">
+    <>
       <Title>{title}</Title>
+      <div className="text-center">
+        <time>{formattedDate}</time>
+      </div>
       <div className="flex flex-col items-center">
         <div className="space-y-5 sm:w-full sm:px-5 lg:w-5/6 xl:w-1/3">
           <div className="dark:prose-invert prose-a:no-underline prose-a:font-bold hover:prose-a:text-[#ffff00] prose-p:text-[#d6d6d6]">
             <MdxComponent />
           </div>
+          <Notbyai />
           <div>
             <Link
               to={`https://github.com/nullndr/website/edit/main/posts/${file}.mdx`}
@@ -73,6 +80,6 @@ export default function () {
           </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }

app/routes/blog._index.tsx

@@ -17,7 +17,7 @@ export default function () {
   const posts = useLoaderData<typeof loader>();
 
   return (
-    <div className="space-y-6">
+    <>
       <Title>Here I blog about whatever get my attention</Title>
       {posts.length > 0 ? (
         <div className="flex flex-col items-center space-y-5">
@@ -28,6 +28,6 @@ export default function () {
       ) : (
         <EmptyState />
       )}
-    </div>
+    </>
   );
 }

app/routes/blog.tsx

@@ -7,7 +7,7 @@ export default function () {
   const { handle } = useMatch();
 
   return (
-    <div>
+    <div className="space-y-6">
       <LinkWrapper>
         <Link to={handle.to}>{handle.text}</Link>
       </LinkWrapper>