From ceb31f2bcc843e5045bfb52b3cbf2a3a291ed31a Mon Sep 17 00:00:00 2001
From: Andrea <andrea@yaaaw.it>
Date: Wed, 25 Sep 2024 10:11:37 +0200
Subject: [PATCH] refactor: code refactor

---
 app/routes/blog.$file.tsx  | 13 ++++++++++---
 app/routes/blog._index.tsx |  4 ++--
 app/routes/blog.tsx        |  2 +-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/routes/blog.$file.tsx b/app/routes/blog.$file.tsx
index 09bff28..708ea6d 100644
--- a/app/routes/blog.$file.tsx
+++ b/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>
+    </>
   );
 }
diff --git a/app/routes/blog._index.tsx b/app/routes/blog._index.tsx
index 8edc1c3..8dbbb89 100644
--- a/app/routes/blog._index.tsx
+++ b/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>
+    </>
   );
 }
diff --git a/app/routes/blog.tsx b/app/routes/blog.tsx
index e59d263..fefb98d 100644
--- a/app/routes/blog.tsx
+++ b/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>