refactor: code refactor

app/routes/_index.tsx

@@ -53,9 +53,11 @@ export default function Index() {
               </a>
             </IconContext.Provider>
           </nav>
-          <LinkWrapper>
+          <div className="flex justify-center items-center space-x-6">
-            <Link to="/blog">Blog</Link>
+            <LinkWrapper>
-          </LinkWrapper>
+              <Link to="/blog">Blog</Link>
+            </LinkWrapper>
+          </div>
         </div>
       </div>
     </div>

app/routes/blog.$file.tsx

@@ -46,7 +46,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
   ];
 };
 
-export default function () {
+export default function Post() {
   const {
     code,
     frontmatter: { title, published },
@@ -62,7 +62,7 @@ export default function () {
         <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="space-y-5 sm:w-full sm:px-5 lg:w-5/6 xl:w-2/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>

app/routes/blog._index.tsx

@@ -13,7 +13,7 @@ export const loader = () => {
   return findPosts();
 };
 
-export default function () {
+export default function Blog() {
   const posts = useLoaderData<typeof loader>();
 
   return (

app/routes/blog.tsx

@@ -20,7 +20,7 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-export default function () {
+export default function BlogLayout() {
   const { handle } = useMatch();
 
   return (