add new friend page

fix other page layout

app/blog/layout.tsx

@@ -8,7 +8,7 @@ export const metadata: Metadata = {
 
 export default function PageLayout({ children }: { children: ReactNode }) {
   return (
-    <main className="w-full max-w-4xl mx-auto">
+    <main className="flex-1 w-full max-w-4xl mx-auto">
       <h1
         className={clsx(
           'text-5xl font-bold text-center font-Barlow',
@@ -17,7 +17,6 @@ export default function PageLayout({ children }: { children: ReactNode }) {
       >
         Blog posts
       </h1>
-
       <div className="px-4 lg:px-0">{children}</div>
     </main>
   );

app/friends/layout.tsx

@@ -0,0 +1,27 @@
+import clsx from 'clsx';
+import { Metadata } from 'next';
+import { ReactNode } from 'react';
+
+export const metadata: Metadata = {
+  title: 'RUA - Friends',
+};
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+      <main className="flex-1 w-full max-w-4xl mx-auto">
+        <h1
+          className={clsx(
+            'text-5xl font-bold text-center font-Barlow',
+            'mt-8 mb-20 text-gray-800 dark:text-gray-200',
+          )}
+        >
+          Friends
+        </h1>
+        <div className="px-4 lg:px-0">{children}</div>
+      </main>
+    </>
+  );
+};
+
+export default Layout;

app/friends/page.tsx

@@ -0,0 +1,5 @@
+const Page = () => {
+  return <>test</>;
+};
+
+export default Page;

app/p/[slug]/page.tsx

@@ -62,7 +62,7 @@ const Page = async ({
         id="article"
         className={clsx(
           'relative max-w-4xl px-4 mx-auto my-10',
-          'lg:w-[56rem] w-full',
+          'lg:w-[56rem] w-full flex-1',
         )}
       >
         <h1>{mdxSource.frontmatter?.title}</h1>

app/projects/layout.tsx

@@ -0,0 +1,19 @@
+import clsx from 'clsx';
+import { ReactNode } from 'react';
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+      <main
+        className={clsx(
+          'flex-1 max-w-4xl px-8 py-8 mx-auto',
+          'lg:px-0 w-full flex-1',
+        )}
+      >
+        {children}
+      </main>
+    </>
+  );
+};
+
+export default Layout;

app/projects/loading.tsx

@@ -10,7 +10,6 @@ export const metadata: Metadata = {
 const Loading = () => {
   return (
     <>
-      <main className="max-w-4xl px-8 py-8 mx-auto lg:px-0">
       <div>
         {/* Git projects */}
         <div>
@@ -43,7 +42,6 @@ const Loading = () => {
           ))}
         </div>
       </div>
-      </main>
     </>
   );
 };

app/projects/page.tsx

@@ -14,9 +14,6 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <>
-      <main
-        className={clsx('flex-1 max-w-4xl px-8 py-8 mx-auto', 'lg:px-0 w-full')}
-      >
       <div>
         {/* Git projects */}
         <div>
@@ -57,7 +54,6 @@ export default function Page() {
           ))}
         </div>
       </div>
-      </main>
     </>
   );
 }

components/pages/nav-bar.tsx

@@ -30,6 +30,11 @@ const txtMenu = [
   },
   {
     id: 4,
+    name: 'Friends',
+    path: '/friends',
+  },
+  {
+    id: 5,
     name: 'About',
     path: '/about',
   },

styles/globals.css

@@ -143,10 +143,9 @@ code {
 }
 
 pre {
-  padding: 1em;
+  @apply p-4 rounded-lg;
   margin: 0.5em 0;
   overflow: auto;
-  border-radius: 0.3em;
   @apply bg-white dark:bg-rua-gray-800;
   /* font-family: 'Fira Code', 'Fira Mono', Menlo, Consolas, 'DejaVu Sans Mono',
       monospace; */