From 8650373e78cbdf2764c453992752cf270b0fc947 Mon Sep 17 00:00:00 2001
From: DefectingCat <i@defect.ink>
Date: Fri, 10 Nov 2023 13:58:08 +0800
Subject: [PATCH] add new friend page

fix other page layout
---
 app/blog/layout.tsx          |  3 +-
 app/friends/layout.tsx       | 27 +++++++++++++
 app/friends/page.tsx         |  5 +++
 app/p/[slug]/page.tsx        |  2 +-
 app/projects/layout.tsx      | 19 +++++++++
 app/projects/loading.tsx     | 58 +++++++++++++--------------
 app/projects/page.tsx        | 76 +++++++++++++++++-------------------
 components/pages/nav-bar.tsx |  5 +++
 styles/globals.css           |  3 +-
 9 files changed, 123 insertions(+), 75 deletions(-)
 create mode 100644 app/friends/layout.tsx
 create mode 100644 app/friends/page.tsx
 create mode 100644 app/projects/layout.tsx

diff --git a/app/blog/layout.tsx b/app/blog/layout.tsx
index 463ab03..4ecd5d4 100644
--- a/app/blog/layout.tsx
+++ b/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>
   );
diff --git a/app/friends/layout.tsx b/app/friends/layout.tsx
new file mode 100644
index 0000000..663cdf5
--- /dev/null
+++ b/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;
diff --git a/app/friends/page.tsx b/app/friends/page.tsx
new file mode 100644
index 0000000..b8689f4
--- /dev/null
+++ b/app/friends/page.tsx
@@ -0,0 +1,5 @@
+const Page = () => {
+  return <>test</>;
+};
+
+export default Page;
diff --git a/app/p/[slug]/page.tsx b/app/p/[slug]/page.tsx
index a84f154..dcef78f 100644
--- a/app/p/[slug]/page.tsx
+++ b/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>
diff --git a/app/projects/layout.tsx b/app/projects/layout.tsx
new file mode 100644
index 0000000..fc8e016
--- /dev/null
+++ b/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;
diff --git a/app/projects/loading.tsx b/app/projects/loading.tsx
index 388344c..219416f 100644
--- a/app/projects/loading.tsx
+++ b/app/projects/loading.tsx
@@ -10,40 +10,38 @@ 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>
-          {/* Git projects */}
-          <div>
-            <h1 className="mb-4 text-2xl">Projects</h1>
-          </div>
-          <div
-            className={clsx(
-              'grid grid-cols-1 lg:grid-cols-3',
-              'md:grid-cols-2 gap-5',
-            )}
-          >
-            {projects.map((_, i) => (
-              <PojectCardSkeleton key={i} />
-            ))}
-          </div>
+          <h1 className="mb-4 text-2xl">Projects</h1>
         </div>
+        <div
+          className={clsx(
+            'grid grid-cols-1 lg:grid-cols-3',
+            'md:grid-cols-2 gap-5',
+          )}
+        >
+          {projects.map((_, i) => (
+            <PojectCardSkeleton key={i} />
+          ))}
+        </div>
+      </div>
 
-        <div className="mt-6">
-          <div>
-            <h1 className="mb-4 text-2xl">Seft Hosts</h1>
-          </div>
-          <div
-            className={clsx(
-              'grid grid-cols-1 lg:grid-cols-3',
-              'md:grid-cols-2 gap-5',
-            )}
-          >
-            {selfHosts.map((_, i) => (
-              <PojectCardSkeleton key={i} />
-            ))}
-          </div>
+      <div className="mt-6">
+        <div>
+          <h1 className="mb-4 text-2xl">Seft Hosts</h1>
         </div>
-      </main>
+        <div
+          className={clsx(
+            'grid grid-cols-1 lg:grid-cols-3',
+            'md:grid-cols-2 gap-5',
+          )}
+        >
+          {selfHosts.map((_, i) => (
+            <PojectCardSkeleton key={i} />
+          ))}
+        </div>
+      </div>
     </>
   );
 };
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 4524d3a..bda504c 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -14,50 +14,46 @@ 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>
-          {/* Git projects */}
-          <div>
-            <h1 className="mb-4 text-2xl">Projects</h1>
-          </div>
-          <div
-            className={clsx(
-              'grid grid-cols-1 lg:grid-cols-3',
-              'md:grid-cols-2 gap-5',
-            )}
-          >
-            {projects.map((item, i) => (
-              <ProjectCard
-                key={i}
-                icon={iconMap[item.icon ?? 'github']}
-                project={item}
-              />
-            ))}
-          </div>
+          <h1 className="mb-4 text-2xl">Projects</h1>
         </div>
+        <div
+          className={clsx(
+            'grid grid-cols-1 lg:grid-cols-3',
+            'md:grid-cols-2 gap-5',
+          )}
+        >
+          {projects.map((item, i) => (
+            <ProjectCard
+              key={i}
+              icon={iconMap[item.icon ?? 'github']}
+              project={item}
+            />
+          ))}
+        </div>
+      </div>
 
-        <div className="mt-6">
-          <div>
-            <h1 className="mb-4 text-2xl">Seft Hosts</h1>
-          </div>
-          <div
-            className={clsx(
-              'grid grid-cols-1 lg:grid-cols-3',
-              'md:grid-cols-2 gap-5',
-            )}
-          >
-            {selfHosts.map((item, i) => (
-              <ProjectCard
-                key={i}
-                icon={iconMap[item.icon ?? 'github']}
-                project={item}
-              />
-            ))}
-          </div>
+      <div className="mt-6">
+        <div>
+          <h1 className="mb-4 text-2xl">Seft Hosts</h1>
         </div>
-      </main>
+        <div
+          className={clsx(
+            'grid grid-cols-1 lg:grid-cols-3',
+            'md:grid-cols-2 gap-5',
+          )}
+        >
+          {selfHosts.map((item, i) => (
+            <ProjectCard
+              key={i}
+              icon={iconMap[item.icon ?? 'github']}
+              project={item}
+            />
+          ))}
+        </div>
+      </div>
     </>
   );
 }
diff --git a/components/pages/nav-bar.tsx b/components/pages/nav-bar.tsx
index 5c0fc5e..a58c9ad 100644
--- a/components/pages/nav-bar.tsx
+++ b/components/pages/nav-bar.tsx
@@ -30,6 +30,11 @@ const txtMenu = [
   },
   {
     id: 4,
+    name: 'Friends',
+    path: '/friends',
+  },
+  {
+    id: 5,
     name: 'About',
     path: '/about',
   },
diff --git a/styles/globals.css b/styles/globals.css
index 1936d61..c18a8b2 100644
--- a/styles/globals.css
+++ b/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; */